thread-ui 0.6.0 → 0.7.0

package/README.md

@@ -76,7 +76,7 @@ Component CSS is pre-generated using Panda CSS, so components render correctly s
 
 ### Data Display
 
-`FilterControls` `SortControls`
+`DataDisplayControls` `FilterControls` `SortControls`
 
 ## Hooks
 

package/dist/components/data-display/data-display-controls/data-display-controls.d.ts

@@ -0,0 +1,2 @@
+import { DataDisplayControlsProps } from './data-display-controls.types';
+export declare const DataDisplayControls: <T>({ fields, sortFields, activeSort, activeFilters, onClearAll, isDefault, isActive, onClearFilter, onToggleFilter, onToggleSort, size, color, filterVariant, showFilterLabel, showSortLabel, }: DataDisplayControlsProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/data-display/data-display-controls/data-display-controls.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from '../../../styled-system/css';
+import { FilterControls, InlineFilterControls } from '../filter-controls';
+import { SortControls } from '../sort-controls';
+import { Button } from '../../../components/ui';
+const styles = cva({
+    base: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'start',
+    },
+    variants: {
+        size: {
+            sm: { gap: 1 },
+            md: { gap: 2 },
+            lg: { gap: 3 },
+        },
+    },
+});
+export const DataDisplayControls = ({ fields, sortFields, activeSort, activeFilters, onClearAll, isDefault, isActive, onClearFilter, onToggleFilter, onToggleSort, size, color, filterVariant = 'inline', showFilterLabel, showSortLabel, }) => {
+    const sharedProps = {
+        color,
+        size,
+        hideReset: true,
+        neutralWhenInactive: true,
+    };
+    const filterProps = {
+        isDefault,
+        fields: fields.map((f) => ({ ...f })),
+        activeFilters,
+        onClear: onClearFilter,
+        onClearAll,
+        onToggle: onToggleFilter,
+        isActive,
+        showFilterLabel,
+    };
+    const sortProps = {
+        fields: sortFields,
+        activeSort,
+        onToggle: onToggleSort,
+        onClear: onClearAll,
+        isDefault,
+        showSortLabel,
+    };
+    const Filter = filterVariant === 'standard' ? FilterControls : InlineFilterControls;
+    return (_jsxs("div", { className: styles({ size }), children: [_jsx(Filter, { ...sharedProps, ...filterProps }), _jsx(SortControls, { ...sharedProps, ...sortProps }), !isDefault && (_jsx(Button, { ariaLabel: "Clear all filters and Sorting", size: "sm", onClick: onClearAll, text: true, children: "Reset" }))] }));
+};
+//# sourceMappingURL=data-display-controls.js.map

package/dist/components/data-display/data-display-controls/data-display-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-display-controls.js","sourceRoot":"","sources":["../../../../src/components/data-display/data-display-controls/data-display-controls.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,MAAM,MAAM,GAAG,GAAG,CAAC;IAClB,IAAI,EAAE;QACL,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,UAAU,EAAE,OAAO;KACnB;IACD,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE;YACd,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE;YACd,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE;SACd;KACD;CACD,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAK,EACvC,MAAM,EACN,UAAU,EACV,UAAU,EACV,aAAa,EACb,UAAU,EACV,SAAS,EACT,QAAQ,EACR,aAAa,EACb,cAAc,EACd,YAAY,EACZ,IAAI,EACJ,KAAK,EACL,aAAa,GAAG,QAAQ,EACxB,eAAe,EACf,aAAa,GACgB,EAAE,EAAE;IACjC,MAAM,WAAW,GAAG;QACnB,KAAK;QACL,IAAI;QACJ,SAAS,EAAE,IAAI;QACf,mBAAmB,EAAE,IAAI;KACzB,CAAC;IAEF,MAAM,WAAW,GAAG;QACnB,SAAS;QACT,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;QACrC,aAAa;QACb,OAAO,EAAE,aAAa;QACtB,UAAU;QACV,QAAQ,EAAE,cAAc;QACxB,QAAQ;QACR,eAAe;KACf,CAAC;IAEF,MAAM,SAAS,GAAG;QACjB,MAAM,EAAE,UAAU;QAClB,UAAU;QACV,QAAQ,EAAE,YAAY;QACtB,OAAO,EAAE,UAAU;QACnB,SAAS;QACT,aAAa;KACb,CAAC;IAEF,MAAM,MAAM,GAAG,aAAa,KAAK,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,oBAAoB,CAAC;IAEpF,OAAO,CACN,eAAK,SAAS,EAAE,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,aAC/B,KAAC,MAAM,OAAK,WAAW,KAAM,WAAW,GAAI,EAC5C,KAAC,YAAY,OAAK,WAAW,KAAM,SAAS,GAAI,EAC/C,CAAC,SAAS,IAAI,CACd,KAAC,MAAM,IACN,SAAS,EAAC,+BAA+B,EACzC,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,UAAU,EACnB,IAAI,4BAGI,CACT,IACI,CACN,CAAC;AACH,CAAC,CAAC"}

package/dist/components/data-display/data-display-controls/data-display-controls.types.d.ts

@@ -0,0 +1,19 @@
+import { Override, Prettify } from '../../../types';
+import { SortControlsConfig, SortField, SortControlsProps } from '../sort-controls/sort-controls.types';
+import { FilterControlsConfig, ResolvedFilterField, FilterControlsBaseProps } from '../filter-controls/filter-controls.types';
+export type DataField<T> = Prettify<Override<SortField<T> & ResolvedFilterField<T>, {}>>;
+export type DataDisplayControlsConfig<T> = Prettify<Override<SortControlsConfig<T> & FilterControlsConfig<T>, {
+    fields: DataField<T>[];
+}>>;
+export type DataDisplayControlsData<T> = {
+    refinedData: T[];
+    dataDisplayControlsProps: DataDisplayControlsProps<T>;
+};
+export type DataDisplayControlsProps<T> = Prettify<Omit<SortControlsProps<T> & FilterControlsBaseProps<T>, 'fields' | 'hideReset' | 'onToggle' | 'onClear'> & {
+    fields: DataField<T>[];
+    sortFields: DataField<T>[];
+    onToggleSort: SortControlsProps<T>['onToggle'];
+    onClearFilter: FilterControlsBaseProps<T>['onClear'];
+    onToggleFilter: FilterControlsBaseProps<T>['onToggle'];
+    filterVariant?: 'standard' | 'inline';
+}>;

package/dist/components/data-display/data-display-controls/data-display-controls.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data-display-controls.types.js.map

package/dist/components/data-display/data-display-controls/data-display-controls.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-display-controls.types.js","sourceRoot":"","sources":["../../../../src/components/data-display/data-display-controls/data-display-controls.types.ts"],"names":[],"mappings":""}

package/dist/components/data-display/data-display-controls/index.d.ts

@@ -0,0 +1,2 @@
+export type { DataDisplayControlsProps } from './data-display-controls.types';
+export { DataDisplayControls } from './data-display-controls';

package/dist/components/data-display/data-display-controls/index.js

@@ -0,0 +1,2 @@
+export { DataDisplayControls } from './data-display-controls';
+//# sourceMappingURL=index.js.map

package/dist/components/data-display/data-display-controls/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/data-display/data-display-controls/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/components/data-display/data-display-controls/use-data-display-controls.d.ts

@@ -0,0 +1,2 @@
+import { DataDisplayControlsConfig, DataDisplayControlsData } from './data-display-controls.types';
+export declare const useDataDisplayControls: <T>({ data, defaultSort, defaultFilters, filterMode, multiSort, fields, }: DataDisplayControlsConfig<T>) => DataDisplayControlsData<T>;

package/dist/components/data-display/data-display-controls/use-data-display-controls.js

@@ -0,0 +1,41 @@
+'use client';
+import { useFilterControls } from '../filter-controls';
+import { useSortControls } from '../sort-controls';
+export const useDataDisplayControls = ({ data, defaultSort, defaultFilters, filterMode, multiSort, fields, }) => {
+    const { filteredData, clearAllFilters, clearFilter, filterControlsProps, activeFilters, toggleFilter, } = useFilterControls({
+        data,
+        fields,
+        filterMode,
+        defaultFilters,
+    });
+    const sortFields = filterControlsProps.fields.filter((field) => {
+        const unique = new Set(filteredData.map((row) => row[field.key]));
+        return unique.size > 1;
+    });
+    const { sortedData: refinedData, activeSort, clearSort, toggleSort, sortControlsProps, } = useSortControls({
+        data: filteredData,
+        fields: sortFields,
+        defaultSort,
+        multiSort,
+    });
+    const onClearAll = () => {
+        clearAllFilters();
+        clearSort();
+    };
+    return {
+        refinedData,
+        dataDisplayControlsProps: {
+            fields: filterControlsProps.fields,
+            sortFields,
+            activeSort,
+            activeFilters,
+            isDefault: filterControlsProps.isDefault && sortControlsProps.isDefault,
+            isActive: filterControlsProps.isActive,
+            onClearAll,
+            onToggleSort: toggleSort,
+            onToggleFilter: toggleFilter,
+            onClearFilter: clearFilter,
+        },
+    };
+};
+//# sourceMappingURL=use-data-display-controls.js.map

package/dist/components/data-display/data-display-controls/use-data-display-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-data-display-controls.js","sourceRoot":"","sources":["../../../../src/components/data-display/data-display-controls/use-data-display-controls.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGnD,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAI,EACzC,IAAI,EACJ,WAAW,EACX,cAAc,EACd,UAAU,EACV,SAAS,EACT,MAAM,GACwB,EAA8B,EAAE;IAC9D,MAAM,EACL,YAAY,EACZ,eAAe,EACf,WAAW,EACX,mBAAmB,EACnB,aAAa,EACb,YAAY,GACZ,GAAG,iBAAiB,CAAI;QACxB,IAAI;QACJ,MAAM;QACN,UAAU;QACV,cAAc;KACd,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,mBAAmB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE;QAC9D,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QAClE,OAAO,MAAM,CAAC,IAAI,GAAG,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,MAAM,EACL,UAAU,EAAE,WAAW,EACvB,UAAU,EACV,SAAS,EACT,UAAU,EACV,iBAAiB,GACjB,GAAG,eAAe,CAAC;QACnB,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,UAAU;QAClB,WAAW;QACX,SAAS;KACT,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,GAAG,EAAE;QACvB,eAAe,EAAE,CAAC;QAClB,SAAS,EAAE,CAAC;IACb,CAAC,CAAC;IAEF,OAAO;QACN,WAAW;QACX,wBAAwB,EAAE;YACzB,MAAM,EAAE,mBAAmB,CAAC,MAAM;YAClC,UAAU;YACV,UAAU;YACV,aAAa;YACb,SAAS,EAAE,mBAAmB,CAAC,SAAS,IAAI,iBAAiB,CAAC,SAAS;YACvE,QAAQ,EAAE,mBAAmB,CAAC,QAAQ;YACtC,UAAU;YACV,YAAY,EAAE,UAAU;YACxB,cAAc,EAAE,YAAY;YAC5B,aAAa,EAAE,WAAW;SAC1B;KACD,CAAC;AACH,CAAC,CAAC"}

package/dist/components/data-display/filter-controls/filter-controls.types.d.ts

@@ -15,8 +15,11 @@ export type FilterField<T> = {
     icon?: IconNames;
     /** Optional color accent for the filter control */
     color?: UtilityColorOptions;
-    /** Selectable options for this field. If omitted, options are derived from the data */
-    options?: FilterOption<T[keyof T]>[];
+    /** Customize options for this field (order or display label). If omitted, options are derived from the data */
+    filterOptions?: (string | {
+        label: string;
+        value: T[keyof T];
+    })[];
 };
 /** `FilterField` with `options` guaranteed to be present after resolution */
 export type ResolvedFilterField<T> = Omit<FilterField<T>, 'options'> & {
@@ -38,7 +41,7 @@ export type FilterControlsConfig<T> = {
     /** Filters applied on initial render */
     defaultFilters?: ActiveFilter<T>[];
     /** Whether multiple active filters combine with AND or OR logic @default `'and'` */
-    mode?: 'and' | 'or';
+    filterMode?: 'and' | 'or';
 };
 /** Return value of `useFilterControls` — filtered data plus props to pass to `FilterControls` */
 export type FilterControlsData<T> = {
@@ -53,9 +56,9 @@ export type FilterControlsData<T> = {
     /** Clears all active filters across all fields */
     clearAllFilters: () => void;
     /** Pre-assembled props to spread directly onto `FilterControls` */
-    filterControlsProps: FilterControlsProps<T>;
+    filterControlsProps: FilterControlsBaseProps<T>;
 };
-export type FilterControlsProps<T> = {
+export type FilterControlsBaseProps<T> = {
     /** Size variant for the filter controls @default `'sm'` */
     size?: UtilitySizeOptions;
     /** Color accent applied to the controls */
@@ -72,4 +75,17 @@ export type FilterControlsProps<T> = {
     onClear: (key: keyof T) => void;
     /** Called when all active filters are cleared */
     onClearAll: () => void;
+    /** Checks whether a specific value is active for a given field */
+    isActive: (key: keyof T, value: T[keyof T]) => boolean;
+    /** Optionally hide button to reset filters */
+    hideReset?: boolean;
+    /** Optionally display title `Filter` above filters */
+    showFilterLabel?: boolean;
+    /** Display Filter Dropdown Buttons as neutral when no sort is applied @default `'false'`` */
+    neutralWhenInactive?: boolean;
+};
+export type FilterControlsProps<T> = Omit<FilterControlsBaseProps<T>, 'neutralWhenInactive'>;
+export type InlineFilterControlsProps<T> = FilterControlsBaseProps<T> & {
+    /** Determines where field Title is displayed */
+    fieldTitleDisplay?: 'none' | 'inline' | 'block';
 };

package/dist/components/data-display/filter-controls/index.d.ts

@@ -1,2 +1,4 @@
-export type { FilterControlsProps } from './filter-controls.types';
-export { FilterControls } from './filter-controls';
+export { useFilterControls } from './use-filter-controls';
+export type { FilterControlsProps, InlineFilterControlsProps } from './filter-controls.types';
+export { FilterControls } from './variants/filter-controls';
+export { InlineFilterControls } from './variants/inline-filter-controls';

package/dist/components/data-display/filter-controls/index.js

@@ -1,2 +1,4 @@
-export { FilterControls } from './filter-controls';
+export { useFilterControls } from './use-filter-controls';
+export { FilterControls } from './variants/filter-controls';
+export { InlineFilterControls } from './variants/inline-filter-controls';
 //# sourceMappingURL=index.js.map

package/dist/components/data-display/filter-controls/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/data-display/filter-controls/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/data-display/filter-controls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC"}

package/dist/components/data-display/filter-controls/use-filter-controls.d.ts

@@ -20,4 +20,4 @@ import type { FilterControlsConfig, FilterControlsData } from './filter-controls
  *   </>
  * );
  */
-export declare const useFilterControls: <T>({ data, fields, defaultFilters, mode, }: FilterControlsConfig<T>) => FilterControlsData<T>;
+export declare const useFilterControls: <T>({ data, fields, defaultFilters, filterMode, }: FilterControlsConfig<T>) => FilterControlsData<T>;

package/dist/components/data-display/filter-controls/use-filter-controls.js

@@ -21,11 +21,13 @@ import { useState, useMemo } from 'react';
  *   </>
  * );
  */
-export const useFilterControls = ({ data, fields, defaultFilters, mode = 'and', }) => {
+export const useFilterControls = ({ data, fields, defaultFilters, filterMode = 'and', }) => {
     const [activeFilters, setActiveFilters] = useState(defaultFilters ?? []);
     const resolvedFields = useMemo(() => fields.map((field) => {
-        if (field.options)
-            return field;
+        if (field.filterOptions) {
+            const options = field.filterOptions.map((o) => typeof o === 'string' ? { value: o, label: o } : o);
+            return { ...field, options };
+        }
         const unique = [...new Set(data.map((row) => row[field.key]))];
         const options = unique
             .map((value) => ({ value, label: String(value) }))
@@ -64,12 +66,18 @@ export const useFilterControls = ({ data, fields, defaultFilters, mode = 'and',
         if (activeFilters.length === 0)
             return data;
         return data.filter((row) => {
-            if (mode === 'and') {
+            if (filterMode === 'and') {
                 return activeFilters.every((f) => f.values.includes(row[f.key]));
             }
             return activeFilters.some((f) => f.values.includes(row[f.key]));
         });
-    }, [data, activeFilters, mode]);
+    }, [data, activeFilters, filterMode]);
+    const activeSet = useMemo(() => {
+        const set = new Set();
+        activeFilters.forEach((f) => f.values.forEach((v) => set.add(`${String(f.key)}:${String(v)}`)));
+        return set;
+    }, [activeFilters]);
+    const isActive = (key, value) => activeSet.has(`${String(key)}:${String(value)}`);
     return {
         filteredData,
         activeFilters,
@@ -83,6 +91,7 @@ export const useFilterControls = ({ data, fields, defaultFilters, mode = 'and',
             onClear: clearFilter,
             onClearAll: clearAllFilters,
             isDefault,
+            isActive,
         },
     };
 };

package/dist/components/data-display/filter-controls/use-filter-controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-filter-controls.js","sourceRoot":"","sources":["../../../../src/components/data-display/filter-controls/use-filter-controls.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-filter-controls.js","sourceRoot":"","sources":["../../../../src/components/data-display/filter-controls/use-filter-controls.ts"],"names":[],"mappings":"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"}

package/dist/components/data-display/filter-controls/{filter-controls.d.ts → variants/filter-controls.d.ts}

@@ -1,4 +1,4 @@
-import { FilterControlsProps } from './filter-controls.types';
+import { FilterControlsProps } from '../filter-controls.types';
 /**
  * Renders a row of multi-select dropdown filters and a reset button.
  * Designed to be used with `useFilterControls` via `filterControlsProps`.
@@ -7,4 +7,4 @@ import { FilterControlsProps } from './filter-controls.types';
  * const { filteredData, filterControlsProps } = useFilterControls({ data, fields });
  * <FilterControls {...filterControlsProps} />
  */
-export declare const FilterControls: <T>({ fields, activeFilters, onToggle, onClear, onClearAll, size, isDefault, }: FilterControlsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterControls: <T>({ fields, activeFilters, onToggle, onClear, onClearAll, size, isDefault, color, hideReset, showFilterLabel, }: FilterControlsProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/data-display/filter-controls/variants/filter-controls.js

@@ -0,0 +1,52 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from '../../../../styled-system/css';
+import { Button, Text } from '../../../../components';
+import { MultiDropdown } from '../../../form-elements';
+const styles = {
+    container: cva({
+        base: {
+            display: 'flex',
+            flexDirection: 'column',
+        },
+        variants: {
+            size: {
+                sm: { gap: '1' },
+                md: { gap: '2' },
+                lg: { gap: '3' },
+            },
+        },
+    }),
+    controlsContainer: cva({
+        base: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            width: 'fit-content',
+        },
+        variants: {
+            size: {
+                sm: { gap: '1' },
+                md: { gap: '2' },
+                lg: { gap: '3' },
+            },
+        },
+    }),
+};
+/**
+ * Renders a row of multi-select dropdown filters and a reset button.
+ * Designed to be used with `useFilterControls` via `filterControlsProps`.
+ *
+ * @example
+ * const { filteredData, filterControlsProps } = useFilterControls({ data, fields });
+ * <FilterControls {...filterControlsProps} />
+ */
+export const FilterControls = ({ fields, activeFilters, onToggle, onClear, onClearAll, size = 'sm', isDefault, color, hideReset = false, showFilterLabel = false, }) => {
+    const getActive = (key) => activeFilters.find((f) => f.key === key);
+    return (_jsxs("div", { className: styles.container({ size }), children: [showFilterLabel && _jsx(Text, { bold: true, children: "Filters" }), _jsxs("div", { className: styles.controlsContainer({ size }), children: [fields.map(({ key, label, icon, color: fieldColor, options }) => {
+                        const active = getActive(key);
+                        const selectedValues = (active?.values ?? []);
+                        return (_jsx(MultiDropdown, { size: size, id: String(key), title: label, options: options, values: selectedValues, onToggle: (value) => onToggle(key, value), onClear: () => onClear(key), icon: icon, showLabel: false, color: active ? color : undefined }, String(key)));
+                    }), !isDefault && !hideReset && (_jsx(Button, { color: "text", onClick: onClearAll, size: size, text: true, ariaLabel: "Clear all filters", children: "Reset" }))] })] }));
+};
+//# sourceMappingURL=filter-controls.js.map

package/dist/components/data-display/filter-controls/variants/filter-controls.js.map

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

package/dist/components/data-display/filter-controls/variants/inline-filter-controls.d.ts

@@ -0,0 +1,13 @@
+import { InlineFilterControlsProps } from '../filter-controls.types';
+/**
+ * Renders all filter options as inline toggle buttons.
+ * Designed to be used with `useFilterControls` via `filterControlsProps`.
+ *
+ * Each option is always visible — clicking toggles it on or off.
+ * Active options appear filled; inactive ones appear as outlines.
+ *
+ * @example
+ * const { filteredData, filterControlsProps } = useFilterControls({ data, fields });
+ * <FilterBar {...filterControlsProps} />
+ */
+export declare const InlineFilterControls: <T>({ fields, isActive, onToggle, onClearAll, size, isDefault, color, fieldTitleDisplay, hideReset, showFilterLabel, }: InlineFilterControlsProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/data-display/filter-controls/variants/inline-filter-controls.js

@@ -0,0 +1,77 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css, cva } from '../../../../styled-system/css';
+import { Button, Text } from '../../../../components';
+import { OptionalIconButton } from '../../../../internal-components';
+const styles = {
+    container: cva({
+        base: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'start',
+            flexWrap: 'wrap',
+        },
+        variants: {
+            size: {
+                sm: { gap: '1' },
+                md: { gap: '2' },
+                lg: { gap: '3' },
+            },
+            filterGroup: {
+                true: {
+                    flexWrap: 'inherit',
+                },
+            },
+            titleInline: {
+                true: {
+                    alignItems: 'center',
+                    flexDirection: 'row',
+                },
+            },
+        },
+    }),
+    groupLabel: cva({
+        base: {
+            fontWeight: 'semibold',
+            color: 'text.secondary',
+        },
+        variants: {
+            size: {
+                sm: { fontSize: 'xs', marginRight: '1' },
+                md: { fontSize: 'sm', marginRight: '2' },
+                lg: { fontSize: 'md', marginRight: '2' },
+            },
+        },
+    }),
+};
+/**
+ * Renders all filter options as inline toggle buttons.
+ * Designed to be used with `useFilterControls` via `filterControlsProps`.
+ *
+ * Each option is always visible — clicking toggles it on or off.
+ * Active options appear filled; inactive ones appear as outlines.
+ *
+ * @example
+ * const { filteredData, filterControlsProps } = useFilterControls({ data, fields });
+ * <FilterBar {...filterControlsProps} />
+ */
+export const InlineFilterControls = ({ fields, isActive, onToggle, onClearAll, size = 'sm', isDefault, color = 'tertiary', fieldTitleDisplay = 'inline', hideReset = false, showFilterLabel = false, }) => {
+    return (_jsxs("div", { className: styles.container({ size }), children: [showFilterLabel && _jsx(Text, { bold: true, children: "Filters" }), fields.map(({ key, label, icon, color: fieldColor, options }) => (_jsxs("div", { className: styles.container({
+                    size,
+                    filterGroup: true,
+                    titleInline: fieldTitleDisplay === 'inline',
+                }), children: [fieldTitleDisplay !== 'none' && (_jsx("span", { className: styles.groupLabel({ size }), children: label })), _jsx("div", { className: styles.container({ size, filterGroup: true, titleInline: true }), children: options.map((option) => {
+                            const active = isActive(key, option.value);
+                            const resolvedFieldColor = active
+                                ? (fieldColor ?? color)
+                                : 'neutral';
+                            const buttonProps = {
+                                color: resolvedFieldColor,
+                                size,
+                                onClick: () => onToggle(key, option.value),
+                                name: icon,
+                            };
+                            return (_jsx(OptionalIconButton, { ...buttonProps, children: option.label }, `${String(key)}-${option.value}`));
+                        }) })] }, String(key)))), !hideReset && (_jsx("div", { className: css({ minHeight: '6', display: 'flex', alignItems: 'center' }), children: !isDefault && (_jsx(Button, { color: "text", onClick: onClearAll, size: size, text: true, ariaLabel: "Clear all filters", children: "Reset" })) }))] }));
+};
+//# sourceMappingURL=inline-filter-controls.js.map

package/dist/components/data-display/filter-controls/variants/inline-filter-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-filter-controls.js","sourceRoot":"","sources":["../../../../../src/components/data-display/filter-controls/variants/inline-filter-controls.tsx"],"names":[],"mappings":"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"}

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

@@ -1,2 +1,3 @@
 export * from './filter-controls';
 export * from './sort-controls';
+export * from './data-display-controls';

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

@@ -1,3 +1,4 @@
 export * from './filter-controls';
 export * from './sort-controls';
+export * from './data-display-controls';
 //# sourceMappingURL=index.js.map

package/dist/components/data-display/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/data-display/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/data-display/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,yBAAyB,CAAC"}

package/dist/components/data-display/sort-controls/sort-controls.d.ts

@@ -8,4 +8,4 @@ import { SortControlsProps } from './sort-controls.types';
  * const { sortedData, sortControlsProps } = useSortControls({ data, fields });
  * <SortControls {...sortControlsProps} />
  */
-export declare const SortControls: <T>({ color, fields, activeSort, onToggle, onClear, size, isDefault, }: SortControlsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SortControls: <T>({ color, fields, activeSort, onToggle, onClear, size, isDefault, hideReset, neutralWhenInactive, showSortLabel, }: SortControlsProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/data-display/sort-controls/sort-controls.js

@@ -1,16 +1,22 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from '../../../styled-system/css';
-import { Button, Icon } from '../../../components';
+import { Button, Icon, Text } from '../../../components';
 import { OptionalIconButton } from '../../../internal-components';
 const styles = {
-    controlsContainer: cva({
+    container: cva({
         base: {
             display: 'flex',
             flexDirection: 'row',
-            alignItems: 'center',
         },
         variants: {
+            inner: {
+                true: {},
+                false: {
+                    alignItems: 'start',
+                    flexDirection: 'column',
+                },
+            },
             size: {
                 sm: {
                     gap: '1',
@@ -34,18 +40,19 @@ const styles = {
  * const { sortedData, sortControlsProps } = useSortControls({ data, fields });
  * <SortControls {...sortControlsProps} />
  */
-export const SortControls = ({ color = 'tertiary', fields, activeSort, onToggle, onClear, size = 'sm', isDefault, }) => {
+export const SortControls = ({ color = 'tertiary', fields, activeSort, onToggle, onClear, size = 'sm', isDefault, hideReset = false, neutralWhenInactive = false, showSortLabel = false, }) => {
     const getState = (key) => activeSort.find((s) => s.key === key);
-    return (_jsxs("div", { className: styles.controlsContainer({ size }), children: [fields.map(({ key, label, icon, color: fieldColor }) => {
-                const state = getState(key);
-                const buttonProps = {
-                    color: fieldColor ?? color,
-                    size,
-                    onClick: () => onToggle(key),
-                    name: icon,
-                };
-                return (_jsxs(OptionalIconButton, { ...buttonProps, children: [label, state && _jsx(SortIndicator, { direction: state.direction })] }, String(key)));
-            }), !isDefault && (_jsx(Button, { color: "text", onClick: onClear, size: size, text: true, "aria-label": "Clear all sorting", children: "Reset" }))] }));
+    return (_jsxs("div", { className: styles.container({ inner: false, size }), children: [showSortLabel && _jsx(Text, { bold: true, children: "Sort" }), _jsxs("div", { className: styles.container({ inner: true, size }), children: [fields.map(({ key, label, icon, color: fieldColor }) => {
+                        const state = getState(key);
+                        const resolvedFieldColor = !state && neutralWhenInactive ? 'neutral' : (fieldColor ?? color);
+                        const buttonProps = {
+                            color: resolvedFieldColor,
+                            size,
+                            onClick: () => onToggle(key),
+                            name: icon,
+                        };
+                        return (_jsxs(OptionalIconButton, { ...buttonProps, children: [label, state && _jsx(SortIndicator, { direction: state.direction })] }, String(key)));
+                    }), !isDefault && !hideReset && (_jsx(Button, { color: "text", onClick: onClear, size: size, text: true, ariaLabel: "Clear all sorting", children: "Reset" }))] })] }));
 };
 const SortIndicator = ({ direction }) => direction === 'asc' ? _jsx(Icon, { size: 8, name: "ArrowUp" }) : _jsx(Icon, { size: 8, name: "ArrowDown" });
 //# sourceMappingURL=sort-controls.js.map

package/dist/components/data-display/sort-controls/sort-controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"sort-controls.js","sourceRoot":"","sources":["../../../../src/components/data-display/sort-controls/sort-controls.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3D,MAAM,MAAM,GAAG;IACd,iBAAiB,EAAE,GAAG,CAAC;QACtB,IAAI,EAAE;YACL,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;SACpB;QACD,QAAQ,EAAE;YACT,IAAI,EAAE;gBACL,EAAE,EAAE;oBACH,GAAG,EAAE,GAAG;iBACR;gBACD,EAAE,EAAE;oBACH,GAAG,EAAE,GAAG;iBACR;gBACD,EAAE,EAAE;oBACH,GAAG,EAAE,GAAG;iBACR;aACD;SACD;KACD,CAAC;CACF,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAK,EAChC,KAAK,GAAG,UAAU,EAClB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,IAAI,EACX,SAAS,GACa,EAAE,EAAE;IAC1B,MAAM,QAAQ,GAAG,CAAC,GAAY,EAA6B,EAAE,CAC5D,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;IAEvC,OAAO,CACN,eAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,EAAE,IAAI,EAAE,CAAC,aAChD,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE;gBACvD,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;gBAE5B,MAAM,WAAW,GAAG;oBACnB,KAAK,EAAE,UAAU,IAAI,KAAK;oBAC1B,IAAI;oBACJ,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC;oBAC5B,IAAI,EAAE,IAAI;iBACV,CAAC;gBAEF,OAAO,CACN,MAAC,kBAAkB,OAAuB,WAAW,aACnD,KAAK,EACL,KAAK,IAAI,KAAC,aAAa,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,GAAI,KAF/B,MAAM,CAAC,GAAG,CAAC,CAGf,CACrB,CAAC;YACH,CAAC,CAAC,EAED,CAAC,SAAS,IAAI,CACd,KAAC,MAAM,IACN,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,IAAI,sBACO,mBAAmB,sBAGtB,CACT,IACI,CACN,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAAiC,EAAE,EAAE,CACtE,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,WAAW,GAAG,CAAC"}
+{"version":3,"file":"sort-controls.js","sourceRoot":"","sources":["../../../../src/components/data-display/sort-controls/sort-controls.tsx"],"names":[],"mappings":"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"}

package/dist/components/data-display/sort-controls/sort-controls.types.d.ts

@@ -29,7 +29,7 @@ export type SortControlsConfig<T> = {
     /** Sort applied on initial render */
     defaultSort?: ActiveSort<T>[];
     /** Allows multiple fields to be sorted simultaneously @default `false` */
-    multi?: boolean;
+    multiSort?: boolean;
 };
 /** Return value of `useSortControls` — sorted data plus props to pass to `SortControls` */
 export type SortControlsData<T> = {
@@ -59,4 +59,10 @@ export type SortControlsProps<T> = {
     onClear: () => void;
     /** Hides the reset button when true, indicating sort is in its default state */
     isDefault?: boolean;
+    /** Optionally hide button to reset sorts */
+    hideReset?: boolean;
+    /** Display Sort Buttons as neutral when no sort is applied @default `'false'`` */
+    neutralWhenInactive?: boolean;
+    /** Optionally display title `Sort` above filters */
+    showSortLabel?: boolean;
 };

package/dist/components/data-display/sort-controls/use-sort-controls.d.ts

@@ -20,4 +20,4 @@ import type { SortControlsConfig, SortControlsData } from './sort-controls.types
  *   </>
  * );
  */
-export declare const useSortControls: <T>({ data, fields, multi, defaultSort, }: SortControlsConfig<T>) => SortControlsData<T>;
+export declare const useSortControls: <T>({ data, fields, multiSort, defaultSort, }: SortControlsConfig<T>) => SortControlsData<T>;