@wheelhouse/ui 0.2.3 → 0.2.5

package/dist/components/data-grid/data-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/data-grid.tsx"],"names":[],"mappings":"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"}

package/dist/components/data-grid/data-grid.js

@@ -0,0 +1,123 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+import {} from '@tanstack/react-table';
+import { cn } from '../../lib/utils';
+/** Label for headers / column visibility: `meta.headerTitle`, string `columnDef.header`, or `column.id`. */
+export function getColumnHeaderLabel(column) {
+    const meta = column.columnDef.meta;
+    if (typeof meta?.headerTitle === 'string')
+        return meta.headerTitle;
+    const defHeader = column.columnDef.header;
+    if (typeof defHeader === 'string')
+        return defHeader;
+    return String(column.id);
+}
+const DataGridContext = createContext(undefined);
+function useDataGrid() {
+    const context = useContext(DataGridContext);
+    if (!context) {
+        throw new Error('useDataGrid must be used within a DataGridProvider');
+    }
+    return context;
+}
+function DataGridProvider({ children, table, ...props }) {
+    const tableState = table.getState();
+    const resolvedColumnsResizeMode = props.tableLayout?.columnsResizeMode ?? 'onEnd';
+    // Keep resize mode aligned with the DataGrid contract every render so
+    // consumer-level useReactTable options cannot flip it back between drags.
+    if (props.tableLayout?.columnsResizable) {
+        table.options.columnResizeMode = resolvedColumnsResizeMode;
+    }
+    // Memoize context value so consumers don't re-render during column resize.
+    // Column sizing state is intentionally excluded from deps -- CSS variables
+    // on the <table> element handle width updates without React re-renders.
+    const value = useMemo(() => ({
+        props,
+        table,
+        recordCount: props.recordCount,
+        isLoading: props.isLoading || false,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        table,
+        props.recordCount,
+        props.isLoading,
+        props.loadingMode,
+        props.loadingMessage,
+        props.fetchingMoreMessage,
+        props.allRowsLoadedMessage,
+        props.emptyMessage,
+        props.onRowClick,
+        props.className,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        JSON.stringify(props.tableLayout),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        JSON.stringify(props.tableClassNames),
+        tableState.sorting,
+        tableState.pagination,
+        tableState.columnFilters,
+        tableState.rowSelection,
+        tableState.expanded,
+        tableState.columnVisibility,
+        tableState.columnOrder,
+        tableState.columnPinning,
+        tableState.globalFilter,
+    ]);
+    return _jsx(DataGridContext.Provider, { value: value, children: children });
+}
+function DataGrid({ children, table, ...props }) {
+    const defaultProps = {
+        loadingMode: 'skeleton',
+        tableLayout: {
+            dense: false,
+            cellBorder: false,
+            rowBorder: true,
+            rowRounded: false,
+            stripped: false,
+            headerSticky: false,
+            headerBackground: true,
+            headerBorder: true,
+            width: 'fixed',
+            columnsVisibility: false,
+            columnsResizable: false,
+            columnsResizeMode: 'onEnd',
+            columnsPinnable: false,
+            columnsMovable: false,
+            columnsDraggable: false,
+            rowsDraggable: false,
+            rowsPinnable: false,
+        },
+        tableClassNames: {
+            base: '',
+            header: '',
+            headerRow: '',
+            headerSticky: 'sticky top-0 z-15 bg-background/90 backdrop-blur-xs',
+            body: '',
+            bodyRow: '',
+            footer: '',
+            edgeCell: '',
+        },
+    };
+    const mergedProps = {
+        ...defaultProps,
+        ...props,
+        tableLayout: {
+            ...defaultProps.tableLayout,
+            ...(props.tableLayout || {}),
+        },
+        tableClassNames: {
+            ...defaultProps.tableClassNames,
+            ...(props.tableClassNames || {}),
+        },
+    };
+    // Ensure table is provided
+    if (!table) {
+        throw new Error('DataGrid requires a "table" prop');
+    }
+    return (_jsx(DataGridProvider, { table: table, ...mergedProps, children: children }));
+}
+function DataGridContainer({ children, className, border = true }) {
+    return (_jsx("div", { "data-slot": "data-grid", className: cn('w-full overflow-hidden', border && 'rounded-lg border border-border', className), children: children }));
+}
+export { useDataGrid, DataGridProvider, DataGrid, DataGridContainer };

package/dist/components/data-grid/data-grid.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Striped: Story;
+export declare const Empty: Story;
+//# sourceMappingURL=data-grid.stories.d.ts.map

package/dist/components/data-grid/data-grid.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid.stories.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/data-grid.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAWvD,QAAA,MAAM,IAAI;;;;;;CAMM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA6CnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC"}

package/dist/components/data-grid/data-grid.stories.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { DataGrid, DataGridContainer, DataGridScrollArea, DataGridTable } from '.';
+const columnHelper = createColumnHelper();
+const meta = {
+    title: 'Components/Data grid',
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+};
+export default meta;
+function DataGridStoryHost({ rowCount = 6, ...dataGridProps }) {
+    const data = useMemo(() => Array.from({ length: rowCount }, (_, i) => ({
+        id: String(i + 1),
+        name: `Person ${i + 1}`,
+        role: i % 2 === 0 ? 'Admin' : 'Editor',
+    })), [rowCount]);
+    const columns = useMemo(() => [
+        columnHelper.accessor('name', {
+            header: 'Name',
+            cell: (info) => info.getValue(),
+        }),
+        columnHelper.accessor('role', {
+            header: 'Role',
+            meta: { headerTitle: 'Access' },
+            cell: (info) => info.getValue(),
+        }),
+    ], []);
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+    });
+    return (_jsx(DataGrid, { ...dataGridProps, table: table, recordCount: dataGridProps.recordCount ?? data.length, children: _jsx(DataGridContainer, { className: "max-w-3xl", children: _jsx(DataGridScrollArea, { className: "h-72", children: _jsx(DataGridTable, {}) }) }) }));
+}
+export const Default = {
+    render: () => _jsx(DataGridStoryHost, {}),
+};
+export const Striped = {
+    render: () => _jsx(DataGridStoryHost, { tableLayout: { stripped: true, rowBorder: true } }),
+};
+export const Empty = {
+    render: () => _jsx(DataGridStoryHost, { rowCount: 0, recordCount: 0, emptyMessage: "No people match this view." }),
+};

package/dist/components/data-grid/index.d.ts

@@ -0,0 +1,14 @@
+export { getColumnHeaderLabel, useDataGrid, DataGridProvider, DataGrid, DataGridContainer } from './data-grid';
+export type { DataGridApiFetchParams, DataGridApiResponse, DataGridContextProps, DataGridRequestParams, DataGridProps } from './data-grid';
+export { DataGridColumnFilter, type DataGridColumnFilterProps } from './data-grid-column-filter';
+export { DataGridColumnHeader, type DataGridColumnHeaderProps } from './data-grid-column-header';
+export { DataGridColumnVisibility } from './data-grid-column-visibility';
+export { DataGridPagination, type DataGridPaginationProps } from './data-grid-pagination';
+export { DataGridScrollArea, type DataGridScrollAreaOrientation, type DataGridScrollAreaProps } from './data-grid-scroll-area';
+export { DataGridTable, DataGridTableBase, DataGridTableBody, DataGridTableBodyRow, DataGridTableBodyRowCell, DataGridTableBodyRowExpandded, DataGridTableRenderedRow, DataGridTableBodyRowSkeleton, DataGridTableBodyRowSkeletonCell, DataGridTableEmpty, DataGridTableFoot, DataGridTableFootRow, DataGridTableFootRowCell, DataGridTableHeader, DataGridTableHead, DataGridTableHeadRow, DataGridTableHeadRowCell, DataGridTableHeadRowCellResize, DataGridTableLoader, DataGridTableRowPin, DataGridTableRowSelect, DataGridTableRowSelectAll, DataGridTableRowSpacer, DataGridTableViewport, getDataGridTableResolvedRows, getDataGridTableRowSections, } from './data-grid-table';
+export type { DataGridTablePinnedBoundary } from './data-grid-table';
+export { DataGridTableDnd } from './data-grid-table-dnd';
+export { DataGridTableDndRowHandle, DataGridTableDndRows } from './data-grid-table-dnd-rows';
+export { DataGridTableVirtual } from './data-grid-table-virtual';
+export type { DataGridTableVirtualProps, DataGridTableVirtualScrollElements, DataGridTableVirtualizerOptions } from './data-grid-table-virtual';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/data-grid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,gBAAgB,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAC/G,YAAY,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE3I,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACjG,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACjG,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAC1F,OAAO,EAAE,kBAAkB,EAAE,KAAK,6BAA6B,EAAE,KAAK,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAC/H,OAAO,EACH,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,wBAAwB,EACxB,6BAA6B,EAC7B,wBAAwB,EACxB,4BAA4B,EAC5B,gCAAgC,EAChC,kBAAkB,EAClB,iBAAiB,EACjB,oBAAoB,EACpB,wBAAwB,EACxB,mBAAmB,EACnB,iBAAiB,EACjB,oBAAoB,EACpB,wBAAwB,EACxB,8BAA8B,EAC9B,mBAAmB,EACnB,mBAAmB,EACnB,sBAAsB,EACtB,yBAAyB,EACzB,sBAAsB,EACtB,qBAAqB,EACrB,4BAA4B,EAC5B,2BAA2B,GAC9B,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAC;AAErE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAC7F,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,YAAY,EAAE,yBAAyB,EAAE,kCAAkC,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/components/data-grid/index.js

@@ -0,0 +1,10 @@
+export { getColumnHeaderLabel, useDataGrid, DataGridProvider, DataGrid, DataGridContainer } from './data-grid';
+export { DataGridColumnFilter } from './data-grid-column-filter';
+export { DataGridColumnHeader } from './data-grid-column-header';
+export { DataGridColumnVisibility } from './data-grid-column-visibility';
+export { DataGridPagination } from './data-grid-pagination';
+export { DataGridScrollArea } from './data-grid-scroll-area';
+export { DataGridTable, DataGridTableBase, DataGridTableBody, DataGridTableBodyRow, DataGridTableBodyRowCell, DataGridTableBodyRowExpandded, DataGridTableRenderedRow, DataGridTableBodyRowSkeleton, DataGridTableBodyRowSkeletonCell, DataGridTableEmpty, DataGridTableFoot, DataGridTableFootRow, DataGridTableFootRowCell, DataGridTableHeader, DataGridTableHead, DataGridTableHeadRow, DataGridTableHeadRowCell, DataGridTableHeadRowCellResize, DataGridTableLoader, DataGridTableRowPin, DataGridTableRowSelect, DataGridTableRowSelectAll, DataGridTableRowSpacer, DataGridTableViewport, getDataGridTableResolvedRows, getDataGridTableRowSections, } from './data-grid-table';
+export { DataGridTableDnd } from './data-grid-table-dnd';
+export { DataGridTableDndRowHandle, DataGridTableDndRows } from './data-grid-table-dnd-rows';
+export { DataGridTableVirtual } from './data-grid-table-virtual';

package/dist/components/filters/filter-date-metric-value.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filter-date-metric-value.d.ts","sourceRoot":"","sources":["../../../src/components/filters/filter-date-metric-value.tsx"],"names":[],"mappings":"AAeA,OAAO,EAKH,KAAK,sBAAsB,EAG3B,KAAK,iBAAiB,EAEtB,KAAK,sBAAsB,EAC9B,MAAM,gDAAgD,CAAC;AAyBxD,OAAO,KAAK,EAA2B,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAyIpG;;;;GAIG;AACH,wBAAgB,sBAAsB,CAClC,IAAI,EAAE,iBAAiB,EACvB,QAAQ,EAAE,sBAAsB,EAChC,aAAa,EAAE,MAAM,EACrB,OAAO,CAAC,EAAE,sBAAsB,GACjC,MAAM,CAER;AAED,MAAM,WAAW,sCAAsC,CAAC,CAAC,GAAG,OAAO;IAC/D,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC5B,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,IAAI,EAAE,gBAAgB,CAAC;IACvB,IAAI,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC9B,8EAA8E;IAC9E,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,uHAAuH;AACvH,wBAAgB,iCAAiC,CAAC,CAAC,GAAG,OAAO,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,sCAAsC,CAAC,CAAC,CAAC,2CAqP3J;AAED,MAAM,WAAW,oCAAoC,CAAC,CAAC,GAAG,OAAO;IAC7D,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC5B,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,gBAAgB,CAAC;IACvB,IAAI,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC9B,yGAAyG;IACzG,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AA+ED,gHAAgH;AAChH,wBAAgB,+BAA+B,CAAC,CAAC,GAAG,OAAO,EAAE,EACzD,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,gBAAgB,GACnB,EAAE,oCAAoC,CAAC,CAAC,CAAC,kDAyNzC"}
+{"version":3,"file":"filter-date-metric-value.d.ts","sourceRoot":"","sources":["../../../src/components/filters/filter-date-metric-value.tsx"],"names":[],"mappings":"AAeA,OAAO,EAKH,KAAK,sBAAsB,EAG3B,KAAK,iBAAiB,EAEtB,KAAK,sBAAsB,EAC9B,MAAM,gDAAgD,CAAC;AAyBxD,OAAO,KAAK,EAA2B,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAyIpG;;;;GAIG;AACH,wBAAgB,sBAAsB,CAClC,IAAI,EAAE,iBAAiB,EACvB,QAAQ,EAAE,sBAAsB,EAChC,aAAa,EAAE,MAAM,EACrB,OAAO,CAAC,EAAE,sBAAsB,GACjC,MAAM,CAER;AAED,MAAM,WAAW,sCAAsC,CAAC,CAAC,GAAG,OAAO;IAC/D,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC5B,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,IAAI,EAAE,gBAAgB,CAAC;IACvB,IAAI,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC9B,8EAA8E;IAC9E,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,uHAAuH;AACvH,wBAAgB,iCAAiC,CAAC,CAAC,GAAG,OAAO,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,sCAAsC,CAAC,CAAC,CAAC,2CAqP3J;AAED,MAAM,WAAW,oCAAoC,CAAC,CAAC,GAAG,OAAO;IAC7D,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC5B,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,gBAAgB,CAAC;IACvB,IAAI,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC9B,yGAAyG;IACzG,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAwJD,gHAAgH;AAChH,wBAAgB,+BAA+B,CAAC,CAAC,GAAG,OAAO,EAAE,EACzD,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,gBAAgB,GACnB,EAAE,oCAAoC,CAAC,CAAC,CAAC,kDA0NzC"}

package/dist/components/filters/filter-date-metric-value.js

@@ -183,6 +183,9 @@ const METRIC_EMPTY_AMOUNT = '\u2013';
 /** Spaces around the en dash so empty segments don’t feel cramped (e.g. `$ – `). */
 const METRIC_EMPTY_DISPLAY = ` ${METRIC_EMPTY_AMOUNT} `;
 const metricAmountFormatters = new Map();
+const metricIntegerFormatters = new Map();
+const metricPercentFormatters = new Map();
+const metricPercentSuffixLiteralByLocale = new Map();
 function formatMetricAmountDigits(value, locale) {
     let nf = metricAmountFormatters.get(locale);
     if (!nf) {
@@ -204,11 +207,82 @@ function formatMetricAmountDigits(value, locale) {
     }
     return nf.format(value);
 }
-/** Bar label: `sym` + grouped amount, or `sym` + spaced en dash when empty. */
-function formatMetricMoney(sym, value, locale) {
+function formatMetricIntegerDigits(value, locale) {
+    let nf = metricIntegerFormatters.get(locale);
+    if (!nf) {
+        try {
+            nf = new Intl.NumberFormat(locale, { maximumFractionDigits: 0, useGrouping: true });
+        }
+        catch {
+            nf = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0, useGrouping: true });
+        }
+        metricIntegerFormatters.set(locale, nf);
+    }
+    return nf.format(value);
+}
+function dateMetricBarValueFormat(field) {
+    return field.dateMetricValueFormat ?? 'currency';
+}
+/** Suffix literals from `Intl` for an empty percent segment (locale-specific spacing, RTL, etc.). */
+function percentBarSuffixLiteral(locale) {
+    let s = metricPercentSuffixLiteralByLocale.get(locale);
+    if (s !== undefined)
+        return s;
+    try {
+        const nf = new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: 0 });
+        s = nf
+            .formatToParts(1)
+            .filter((p) => p.type === 'literal')
+            .map((p) => p.value)
+            .join('');
+    }
+    catch {
+        s = '%';
+    }
+    if (!s)
+        s = '%';
+    metricPercentSuffixLiteralByLocale.set(locale, s);
+    return s;
+}
+/** `value` is percentage points (e.g. 85 → 85%); `Intl` expects a ratio, so divide by 100. */
+function formatMetricPercentFromPercentagePoints(value, locale) {
+    let nf = metricPercentFormatters.get(locale);
+    if (!nf) {
+        try {
+            nf = new Intl.NumberFormat(locale, {
+                style: 'percent',
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 20,
+                useGrouping: true,
+            });
+        }
+        catch {
+            nf = new Intl.NumberFormat('en-US', {
+                style: 'percent',
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 20,
+                useGrouping: true,
+            });
+        }
+        metricPercentFormatters.set(locale, nf);
+    }
+    return nf.format(value / 100);
+}
+/** Bar label for a single threshold: currency, percent, or integer locale formatting. */
+function formatDateMetricBarAmount(value, format, locale, currencySym) {
+    if (format === 'currency') {
+        if (value == null || Number.isNaN(value))
+            return `${currencySym}${METRIC_EMPTY_DISPLAY}`;
+        return `${currencySym}${formatMetricAmountDigits(value, locale)}`;
+    }
+    if (format === 'integer') {
+        if (value == null || Number.isNaN(value))
+            return METRIC_EMPTY_DISPLAY;
+        return formatMetricIntegerDigits(value, locale);
+    }
     if (value == null || Number.isNaN(value))
-        return `${sym}${METRIC_EMPTY_DISPLAY}`;
-    return `${sym}${formatMetricAmountDigits(value, locale)}`;
+        return `${METRIC_EMPTY_DISPLAY}${percentBarSuffixLiteral(locale)}`;
+    return formatMetricPercentFromPercentagePoints(value, locale);
 }
 function parseDraftNumber(raw, previous) {
     if (raw.trim() === '')
@@ -277,6 +351,7 @@ export function FilterDateMetricBarValueSegment({ field, values, onChange, opera
     const valueAnyOperator = operators.find((o) => o.value === 'value_any');
     const sym = i18n.defaultCurrency;
     const numberLocale = i18n.numberFormatLocale;
+    const barValueFormat = dateMetricBarValueFormat(field);
     const inputSizeProp = size === 'lg' ? 'default' : 'sm';
     const buttonSize = size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'default';
     const valueSegment = (() => {
@@ -290,7 +365,7 @@ export function FilterDateMetricBarValueSegment({ field, values, onChange, opera
         }
         if (operator === 'value_greater_than') {
             const hasMinValue = payload.min != null && !Number.isNaN(payload.min);
-            const summary = formatMetricMoney(sym, payload.min ?? undefined, numberLocale);
+            const summary = formatDateMetricBarAmount(payload.min ?? undefined, barValueFormat, numberLocale, sym);
             const triggerLabel = `${i18n.operators.greaterThan}: ${summary}`;
             return (_jsx(MetricValueThresholdPopoverShell, { open: metricPopoverOpen, onOpenChange: handleMetricPopoverOpenChange, buttonSize: buttonSize, triggerLabel: triggerLabel, summary: summary, triggerClassName: cn(METRIC_POPOVER_TRIGGER_NARROW, !hasMinValue ? 'text-muted-foreground' : 'text-foreground'), children: _jsx(Input, { type: "number", size: inputSizeProp, className: "w-full min-w-0 tabular-nums", value: draftMin, onChange: (e) => {
                         const v = e.target.value;
@@ -300,7 +375,7 @@ export function FilterDateMetricBarValueSegment({ field, values, onChange, opera
         }
         if (operator === 'value_less_than') {
             const hasMaxValue = payload.max != null && !Number.isNaN(payload.max);
-            const summary = formatMetricMoney(sym, payload.max ?? undefined, numberLocale);
+            const summary = formatDateMetricBarAmount(payload.max ?? undefined, barValueFormat, numberLocale, sym);
             const triggerLabel = `${i18n.operators.lessThan}: ${summary}`;
             return (_jsx(MetricValueThresholdPopoverShell, { open: metricPopoverOpen, onOpenChange: handleMetricPopoverOpenChange, buttonSize: buttonSize, triggerLabel: triggerLabel, summary: summary, triggerClassName: cn(METRIC_POPOVER_TRIGGER_NARROW, !hasMaxValue ? 'text-muted-foreground' : 'text-foreground'), children: _jsx(Input, { type: "number", size: inputSizeProp, className: "w-full min-w-0 tabular-nums", value: draftMax, onChange: (e) => {
                         const v = e.target.value;
@@ -311,8 +386,8 @@ export function FilterDateMetricBarValueSegment({ field, values, onChange, opera
         if (operator === 'value_between') {
             const hasMinValue = payload.min != null && !Number.isNaN(payload.min);
             const hasMaxValue = payload.max != null && !Number.isNaN(payload.max);
-            const minPart = formatMetricMoney(sym, payload.min ?? undefined, numberLocale);
-            const maxPart = formatMetricMoney(sym, payload.max ?? undefined, numberLocale);
+            const minPart = formatDateMetricBarAmount(payload.min ?? undefined, barValueFormat, numberLocale, sym);
+            const maxPart = formatDateMetricBarAmount(payload.max ?? undefined, barValueFormat, numberLocale, sym);
             const summary = `${minPart} - ${maxPart}`;
             const triggerLabel = `${i18n.operators.between}: ${summary}`;
             return (_jsx(MetricValueThresholdPopoverShell, { open: metricPopoverOpen, onOpenChange: handleMetricPopoverOpenChange, buttonSize: buttonSize, triggerLabel: triggerLabel, summary: summary, triggerClassName: cn(METRIC_POPOVER_TRIGGER_WIDE, !hasMinValue && !hasMaxValue ? 'text-muted-foreground' : 'text-foreground'), children: _jsxs("div", { className: "flex w-full flex-col gap-1.5", children: [_jsx(Input, { type: "number", size: inputSizeProp, className: "w-full min-w-0 tabular-nums", value: draftMin, onChange: (e) => {

package/dist/components/filters/filter-fields-listing-demo.d.ts

@@ -0,0 +1,12 @@
+import type { i18n as I18nInstance, TFunction } from 'i18next';
+import type { DateSelectorI18nConfig } from '../../blocks/date-selector/date-selector-types';
+import type { FilterFieldConfig, FilterFieldsConfig } from './filters-types';
+/** Flat fields for minimal `Default` / `WithOneFilter` stories (real listing keys). */
+export declare function buildListingDemoFields(t: TFunction): FilterFieldConfig[];
+/** Grouped listing catalog for `GroupedFieldsAndSearch` (keys and shapes mirror app listing filters). */
+export declare function buildListingGroupedFields(t: TFunction, dateSelectorI18n: DateSelectorI18nConfig, i18n: I18nInstance): FilterFieldsConfig;
+/** Flat listing fields for docs previews (no filter i18n bundle required). */
+export declare function buildListingDemoFieldsForDocs(): FilterFieldConfig[];
+/** Grouped listing catalog for docs previews; pass docs `I18nextProvider` instance and date-selector copy. */
+export declare function buildListingGroupedFieldsForDocs(dateSelectorI18n: DateSelectorI18nConfig, i18n: I18nInstance): FilterFieldsConfig;
+//# sourceMappingURL=filter-fields-listing-demo.d.ts.map

package/dist/components/filters/filter-fields-listing-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-fields-listing-demo.d.ts","sourceRoot":"","sources":["../../../src/components/filters/filter-fields-listing-demo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,IAAI,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAyB/D,OAAO,KAAK,EAAE,sBAAsB,EAA8C,MAAM,gDAAgD,CAAC;AACzI,OAAO,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAkB,MAAM,iBAAiB,CAAC;AA0D7F,uFAAuF;AACvF,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,SAAS,GAAG,iBAAiB,EAAE,CA+BxE;AAED,yGAAyG;AACzG,wBAAgB,yBAAyB,CAAC,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,IAAI,EAAE,YAAY,GAAG,kBAAkB,CA0dxI;AAED,8EAA8E;AAC9E,wBAAgB,6BAA6B,IAAI,iBAAiB,EAAE,CAEnE;AAED,8GAA8G;AAC9G,wBAAgB,gCAAgC,CAAC,gBAAgB,EAAE,sBAAsB,EAAE,IAAI,EAAE,YAAY,GAAG,kBAAkB,CAEjI"}