thread-ui 0.5.0 → 0.6.0

package/README.md

@@ -52,7 +52,7 @@ Component CSS is pre-generated using Panda CSS, so components render correctly s
 
 ### UI Elements
 
-`Button` `Card` `Divider` `Icon` `IconButton` `Modal` `Toggle`
+`Button` `Card` `Divider` `Icon` `IconButton` `Modal` `Toggle` `DotsLoader` `SpinLoader` `Skeleton` `SkeletonLayout`
 
 ### Media Display
 
@@ -72,4 +72,12 @@ Component CSS is pre-generated using Panda CSS, so components render correctly s
 
 ### Layout Components
 
-`ColumnLayout` `Footer` `MasonryLayout`
+`Container` `ColumnLayout` `Footer` `MasonryLayout`
+
+### Data Display
+
+`FilterControls` `SortControls`
+
+## Hooks
+
+`useClickOutside` `useDismiss` `usePathname`

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

@@ -0,0 +1,10 @@
+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`.
+ *
+ * @example
+ * 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;

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

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from '../../../styled-system/css';
+import { Button } from '../../../components';
+import { MultiDropdown } from '../../form-elements';
+const styles = {
+    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, }) => {
+    const getActive = (key) => activeFilters.find((f) => f.key === key);
+    return (_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 }, String(key)));
+            }), !isDefault && (_jsx(Button, { color: "text", onClick: onClearAll, size: size, text: true, "aria-label": "Clear all filters", children: "Reset" }))] }));
+};
+//# sourceMappingURL=filter-controls.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-controls.js","sourceRoot":"","sources":["../../../../src/components/data-display/filter-controls/filter-controls.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,MAAM,MAAM,GAAG;IACd,iBAAiB,EAAE,GAAG,CAAC;QACtB,IAAI,EAAE;YACL,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,KAAK,EAAE,aAAa;SACpB;QACD,QAAQ,EAAE;YACT,IAAI,EAAE;gBACL,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE;gBAChB,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE;gBAChB,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE;aAChB;SACD;KACD,CAAC;CACF,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAK,EAClC,MAAM,EACN,aAAa,EACb,QAAQ,EACR,OAAO,EACP,UAAU,EACV,IAAI,GAAG,IAAI,EACX,SAAS,GACe,EAAE,EAAE;IAC5B,MAAM,SAAS,GAAG,CAAC,GAAY,EAA+B,EAAE,CAC/D,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;IAE1C,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,OAAO,EAAE,EAAE,EAAE;gBAChE,MAAM,MAAM,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC;gBAC9B,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,MAAM,IAAI,EAAE,CAAwB,CAAC;gBAErE,OAAO,CACN,KAAC,aAAa,IACb,IAAI,EAAE,IAAI,EAEV,EAAE,EAAE,MAAM,CAAC,GAAG,CAAC,EACf,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAsD,EAC/D,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,EAAE,KAAmB,CAAC,EACvD,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,EAC3B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,KAAK,IARX,MAAM,CAAC,GAAG,CAAC,CASf,CACF,CAAC;YACH,CAAC,CAAC,EACD,CAAC,SAAS,IAAI,CACd,KAAC,MAAM,IACN,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,UAAU,EACnB,IAAI,EAAE,IAAI,EACV,IAAI,sBACO,mBAAmB,sBAGtB,CACT,IACI,CACN,CAAC;AACH,CAAC,CAAC"}

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

@@ -0,0 +1,75 @@
+import { IconNames } from '../../../components/ui';
+import { UtilityColorOptions, UtilitySizeOptions } from '../../../types';
+/** A single selectable option within a filter field */
+export type FilterOption<V> = {
+    value: V;
+    label: string;
+};
+/** Configuration for a single filterable field */
+export type FilterField<T> = {
+    /** Key of the data object this field filters on */
+    key: keyof T;
+    /** Display label for the filter */
+    label: string;
+    /** Optional icon displayed in the filter control */
+    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]>[];
+};
+/** `FilterField` with `options` guaranteed to be present after resolution */
+export type ResolvedFilterField<T> = Omit<FilterField<T>, 'options'> & {
+    options: FilterOption<T[keyof T]>[];
+};
+/** A currently active filter with one or more selected values */
+export type ActiveFilter<T> = {
+    /** The field being filtered */
+    key: keyof T;
+    /** Currently selected values for this field */
+    values: T[keyof T][];
+};
+/** Configuration passed to `useFilterControls` to set up filtering behavior */
+export type FilterControlsConfig<T> = {
+    /** Dataset to filter */
+    data: T[];
+    /** Fields available for filtering */
+    fields: FilterField<T>[];
+    /** Filters applied on initial render */
+    defaultFilters?: ActiveFilter<T>[];
+    /** Whether multiple active filters combine with AND or OR logic @default `'and'` */
+    mode?: 'and' | 'or';
+};
+/** Return value of `useFilterControls` — filtered data plus props to pass to `FilterControls` */
+export type FilterControlsData<T> = {
+    /** The dataset after all active filters are applied */
+    filteredData: T[];
+    /** Currently active filters */
+    activeFilters: ActiveFilter<T>[];
+    /** Toggles a single value on or off for a given field */
+    toggleFilter: (key: keyof T, value: T[keyof T]) => void;
+    /** Clears all selected values for a given field */
+    clearFilter: (key: keyof T) => void;
+    /** Clears all active filters across all fields */
+    clearAllFilters: () => void;
+    /** Pre-assembled props to spread directly onto `FilterControls` */
+    filterControlsProps: FilterControlsProps<T>;
+};
+export type FilterControlsProps<T> = {
+    /** Size variant for the filter controls @default `'sm'` */
+    size?: UtilitySizeOptions;
+    /** Color accent applied to the controls */
+    color?: UtilityColorOptions;
+    /** Resolved filter fields with guaranteed options */
+    fields: ResolvedFilterField<T>[];
+    /** Currently active filters */
+    activeFilters: ActiveFilter<T>[];
+    /** Hides the reset button when true, indicating filters are in their default state */
+    isDefault?: boolean;
+    /** Called when a filter value is toggled */
+    onToggle: (key: keyof T, value: T[keyof T]) => void;
+    /** Called when all values for a field are cleared */
+    onClear: (key: keyof T) => void;
+    /** Called when all active filters are cleared */
+    onClearAll: () => void;
+};

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

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

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

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

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

@@ -0,0 +1,2 @@
+export type { FilterControlsProps } from './filter-controls.types';
+export { FilterControls } from './filter-controls';

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,23 @@
+import type { FilterControlsConfig, FilterControlsData } from './filter-controls.types';
+/**
+ * Manages filter state for a dataset and returns filtered data alongside
+ * pre-assembled props for `FilterControls`.
+ *
+ * Options for each field are derived automatically from the data if not provided.
+ * Supports AND and OR filter logic across multiple active fields.
+ *
+ * @example
+ * const { filteredData, filterControlsProps } = useFilterControls({
+ *   data: products,
+ *   fields: [{ key: 'category', label: 'Category' }],
+ *   mode: 'or',
+ * });
+ *
+ * return (
+ *   <>
+ *     <FilterControls {...filterControlsProps} />
+ *     <ProductList data={filteredData} />
+ *   </>
+ * );
+ */
+export declare const useFilterControls: <T>({ data, fields, defaultFilters, mode, }: FilterControlsConfig<T>) => FilterControlsData<T>;

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

@@ -0,0 +1,89 @@
+'use client';
+import { useState, useMemo } from 'react';
+/**
+ * Manages filter state for a dataset and returns filtered data alongside
+ * pre-assembled props for `FilterControls`.
+ *
+ * Options for each field are derived automatically from the data if not provided.
+ * Supports AND and OR filter logic across multiple active fields.
+ *
+ * @example
+ * const { filteredData, filterControlsProps } = useFilterControls({
+ *   data: products,
+ *   fields: [{ key: 'category', label: 'Category' }],
+ *   mode: 'or',
+ * });
+ *
+ * return (
+ *   <>
+ *     <FilterControls {...filterControlsProps} />
+ *     <ProductList data={filteredData} />
+ *   </>
+ * );
+ */
+export const useFilterControls = ({ data, fields, defaultFilters, mode = 'and', }) => {
+    const [activeFilters, setActiveFilters] = useState(defaultFilters ?? []);
+    const resolvedFields = useMemo(() => fields.map((field) => {
+        if (field.options)
+            return field;
+        const unique = [...new Set(data.map((row) => row[field.key]))];
+        const options = unique
+            .map((value) => ({ value, label: String(value) }))
+            .sort((a, b) => a.label.localeCompare(b.label));
+        return { ...field, options };
+    }), [data, fields]);
+    const isDefault = useMemo(() => {
+        if (!defaultFilters)
+            return activeFilters.length === 0;
+        if (activeFilters.length !== defaultFilters.length)
+            return false; // was comparing activeFilters.length to itself
+        return activeFilters.every((f, i) => f.key === defaultFilters[i].key &&
+            f.values.length === defaultFilters[i].values.length &&
+            f.values.every((v) => defaultFilters[i].values.includes(v)));
+    }, [activeFilters, defaultFilters]);
+    const toggleFilter = (key, value) => {
+        setActiveFilters((prev) => {
+            const existing = prev.find((f) => f.key === key);
+            if (!existing) {
+                return [...prev, { key, values: [value] }];
+            }
+            const hasValue = existing.values.includes(value);
+            if (hasValue) {
+                const nextValues = existing.values.filter((v) => v !== value);
+                // remove the filter entry entirely if no values remain
+                if (nextValues.length === 0)
+                    return prev.filter((f) => f.key !== key);
+                return prev.map((f) => (f.key === key ? { ...f, values: nextValues } : f));
+            }
+            return prev.map((f) => (f.key === key ? { ...f, values: [...f.values, value] } : f));
+        });
+    };
+    const clearFilter = (key) => setActiveFilters((prev) => prev.filter((f) => f.key !== key));
+    const clearAllFilters = () => setActiveFilters(defaultFilters ?? []);
+    const filteredData = useMemo(() => {
+        if (activeFilters.length === 0)
+            return data;
+        return data.filter((row) => {
+            if (mode === 'and') {
+                return activeFilters.every((f) => f.values.includes(row[f.key]));
+            }
+            return activeFilters.some((f) => f.values.includes(row[f.key]));
+        });
+    }, [data, activeFilters, mode]);
+    return {
+        filteredData,
+        activeFilters,
+        toggleFilter,
+        clearFilter,
+        clearAllFilters,
+        filterControlsProps: {
+            fields: resolvedFields,
+            activeFilters,
+            onToggle: toggleFilter,
+            onClear: clearFilter,
+            onClearAll: clearAllFilters,
+            isDefault,
+        },
+    };
+};
+//# sourceMappingURL=use-filter-controls.js.map

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

@@ -0,0 +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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"}

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

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

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

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

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

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

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

@@ -0,0 +1,3 @@
+export type { SortControlsProps } from './sort-controls.types';
+export { SortControls } from './sort-controls';
+export { useSortControls } from './use-sort-controls';

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

@@ -0,0 +1,3 @@
+export { SortControls } from './sort-controls';
+export { useSortControls } from './use-sort-controls';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/data-display/sort-controls/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC"}

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

@@ -0,0 +1,11 @@
+import { SortControlsProps } from './sort-controls.types';
+/**
+ * Renders a row of sort toggle buttons and a reset button.
+ * Each button cycles through asc → desc → off with a directional arrow indicator.
+ * Designed to be used with `useSortControls` via `sortControlsProps`.
+ *
+ * @example
+ * 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;

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

@@ -0,0 +1,51 @@
+'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 { OptionalIconButton } from '../../../internal-components';
+const styles = {
+    controlsContainer: cva({
+        base: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+        variants: {
+            size: {
+                sm: {
+                    gap: '1',
+                },
+                md: {
+                    gap: '2',
+                },
+                lg: {
+                    gap: '3',
+                },
+            },
+        },
+    }),
+};
+/**
+ * Renders a row of sort toggle buttons and a reset button.
+ * Each button cycles through asc → desc → off with a directional arrow indicator.
+ * Designed to be used with `useSortControls` via `sortControlsProps`.
+ *
+ * @example
+ * const { sortedData, sortControlsProps } = useSortControls({ data, fields });
+ * <SortControls {...sortControlsProps} />
+ */
+export const SortControls = ({ color = 'tertiary', fields, activeSort, onToggle, onClear, size = 'sm', isDefault, }) => {
+    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" }))] }));
+};
+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

@@ -0,0 +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"}

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

@@ -0,0 +1,62 @@
+import { IconNames } from '../../../components/ui';
+import { UtilityColorOptions, UtilitySizeOptions } from '../../../types';
+export type SortDirection = 'asc' | 'desc';
+/** Configuration for a single sortable field */
+export type SortField<T> = {
+    /** Key of the data object this field sorts on */
+    key: keyof T;
+    /** Display label for the sort button */
+    label: string;
+    /** Optional icon displayed in the sort button */
+    icon?: IconNames;
+    /** Optional color accent for the sort button */
+    color?: UtilityColorOptions;
+    /** Custom sort order. Accepts an explicit value array or a comparator function */
+    sortOrder?: T[keyof T][] | ((a: T[keyof T], b: T[keyof T]) => number);
+};
+/** A currently active sort with a direction */
+export type ActiveSort<T> = {
+    /** The field being sorted */
+    key: keyof T;
+    direction: SortDirection;
+};
+/** Configuration passed to `useSortControls` to set up sorting behavior */
+export type SortControlsConfig<T> = {
+    /** Dataset to sort */
+    data: T[];
+    /** Fields available for sorting */
+    fields: SortField<T>[];
+    /** Sort applied on initial render */
+    defaultSort?: ActiveSort<T>[];
+    /** Allows multiple fields to be sorted simultaneously @default `false` */
+    multi?: boolean;
+};
+/** Return value of `useSortControls` — sorted data plus props to pass to `SortControls` */
+export type SortControlsData<T> = {
+    /** The dataset after all active sorts are applied */
+    sortedData: T[];
+    /** Currently active sorts */
+    activeSort: ActiveSort<T>[];
+    /** Cycles a field through asc → desc → off */
+    toggleSort: (key: keyof T) => void;
+    /** Resets all active sorts to `defaultSort` */
+    clearSort: () => void;
+    /** Pre-assembled props to spread directly onto `SortControls` */
+    sortControlsProps: SortControlsProps<T>;
+};
+export type SortControlsProps<T> = {
+    /** Size variant for the sort controls @default `'sm'` */
+    size?: UtilitySizeOptions;
+    /** Fallback color for sort buttons when a field has no color set @default `'tertiary'` */
+    color?: UtilityColorOptions;
+    /** Fields available for sorting */
+    fields: SortField<T>[];
+    /** Currently active sorts */
+    activeSort: ActiveSort<T>[];
+    /** Called when a sort field button is clicked */
+    onToggle: (key: keyof T) => void;
+    /** Called when the reset button is clicked */
+    onClear: () => void;
+    /** Hides the reset button when true, indicating sort is in its default state */
+    isDefault?: boolean;
+};

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

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

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

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

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

@@ -0,0 +1,23 @@
+import type { SortControlsConfig, SortControlsData } from './sort-controls.types';
+/**
+ * Manages sort state for a dataset and returns sorted data alongside
+ * pre-assembled props for `SortControls`.
+ *
+ * Supports single and multi-field sorting, custom sort orders, and comparator functions.
+ * Each field cycles through asc → desc → off on toggle.
+ *
+ * @example
+ * const { sortedData, sortControlsProps } = useSortControls({
+ *   data: products,
+ *   fields: [{ key: 'price', label: 'Price' }],
+ *   multi: true,
+ * });
+ *
+ * return (
+ *   <>
+ *     <SortControls {...sortControlsProps} />
+ *     <ProductList data={sortedData} />
+ *   </>
+ * );
+ */
+export declare const useSortControls: <T>({ data, fields, multi, defaultSort, }: SortControlsConfig<T>) => SortControlsData<T>;

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

@@ -0,0 +1,94 @@
+'use client';
+import { useState, useMemo } from 'react';
+/**
+ * Manages sort state for a dataset and returns sorted data alongside
+ * pre-assembled props for `SortControls`.
+ *
+ * Supports single and multi-field sorting, custom sort orders, and comparator functions.
+ * Each field cycles through asc → desc → off on toggle.
+ *
+ * @example
+ * const { sortedData, sortControlsProps } = useSortControls({
+ *   data: products,
+ *   fields: [{ key: 'price', label: 'Price' }],
+ *   multi: true,
+ * });
+ *
+ * return (
+ *   <>
+ *     <SortControls {...sortControlsProps} />
+ *     <ProductList data={sortedData} />
+ *   </>
+ * );
+ */
+export const useSortControls = ({ data, fields, multi = false, defaultSort, }) => {
+    const [activeSort, setActiveSort] = useState(defaultSort ?? []);
+    const toggleSort = (key) => {
+        setActiveSort((prev) => {
+            const existing = prev.find((s) => s.key === key);
+            if (!existing) {
+                const next = { key, direction: 'asc' };
+                return multi ? [...prev, next] : [next];
+            }
+            if (existing.direction === 'asc') {
+                // flip to desc
+                return prev.map((s) => s.key === key ? { ...s, direction: 'desc' } : s);
+            }
+            // remove (was desc, now off)
+            return prev.filter((s) => s.key !== key);
+        });
+    };
+    const clearSort = () => setActiveSort(defaultSort ?? []);
+    const sortedData = useMemo(() => {
+        if (activeSort.length === 0)
+            return data;
+        return [...data].sort((a, b) => {
+            for (const { key, direction } of activeSort) {
+                const aVal = a[key];
+                const bVal = b[key];
+                const dir = direction === 'asc' ? 1 : -1;
+                const field = fields.find((f) => f.key === key);
+                const { sortOrder } = field ?? {};
+                let cmp = 0;
+                if (typeof sortOrder === 'function') {
+                    cmp = sortOrder(aVal, bVal);
+                }
+                else if (Array.isArray(sortOrder)) {
+                    const aIdx = sortOrder.indexOf(aVal);
+                    const bIdx = sortOrder.indexOf(bVal);
+                    // unknowns sort to the end
+                    const aNorm = aIdx === -1 ? Infinity : aIdx;
+                    const bNorm = bIdx === -1 ? Infinity : bIdx;
+                    cmp = aNorm - bNorm;
+                }
+                else {
+                    cmp = aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
+                }
+                if (cmp !== 0)
+                    return cmp * dir;
+            }
+            return 0;
+        });
+    }, [data, activeSort, fields]);
+    const isDefault = useMemo(() => {
+        if (!defaultSort)
+            return activeSort.length === 0;
+        if (activeSort.length !== defaultSort.length)
+            return false;
+        return activeSort.every((s, i) => s.key === defaultSort[i].key && s.direction === defaultSort[i].direction);
+    }, [activeSort, defaultSort]);
+    return {
+        sortedData,
+        activeSort,
+        toggleSort,
+        clearSort,
+        sortControlsProps: {
+            fields,
+            activeSort,
+            onToggle: toggleSort,
+            onClear: clearSort,
+            isDefault,
+        },
+    };
+};
+//# sourceMappingURL=use-sort-controls.js.map

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

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

package/dist/components/form-elements/{dropdown → dropdowns/dropdown}/dropdown.d.ts

@@ -10,4 +10,4 @@ import { DropdownProps } from './dropdown.types';
  *   onSelect={(val) => setStatus(val)}
  * />
  */
-export declare const Dropdown: ({ id, title, value, options, onSelect, placeholder, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Dropdown: ({ id, title, value, options, onSelect, placeholder, size, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/form-elements/dropdowns/dropdown/dropdown.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cva } from '../../../../styled-system/css';
+import { DropdownBase } from '../dropdown-base/dropdown-base';
+const itemStyles = cva({
+    base: {
+        cursor: 'pointer',
+        paddingX: '4',
+        paddingY: '2',
+        _hover: { backgroundColor: 'surface' },
+    },
+    variants: {
+        isSelected: {
+            true: { backgroundColor: 'elevated' },
+        },
+    },
+});
+/**
+ * Single-select dropdown with an option list and outside-click dismissal.
+ *
+ * @example
+ * <Dropdown
+ *   title="Status"
+ *   value={status}
+ *   options={[{ label: 'Active', value: 'active' }, { label: 'Inactive', value: 'inactive' }]}
+ *   onSelect={(val) => setStatus(val)}
+ * />
+ */
+export const Dropdown = ({ id, title, value, options, onSelect, placeholder = 'Select an option...', size, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const selected = options.find((opt) => opt.value === value);
+    const handleSelect = (option) => {
+        onSelect(option.value);
+        setIsOpen(false);
+    };
+    return (_jsx(DropdownBase, { id: id, title: title, options: options, isOpen: isOpen, onToggle: () => setIsOpen((prev) => !prev), onClose: () => {
+            setIsOpen(false);
+        }, triggerLabel: selected ? selected.label : placeholder, renderItem: (option, index) => (_jsx("li", { className: itemStyles({ isSelected: option.value === selected?.value }), onClick: () => handleSelect(option), children: option.label }, index)), size: size }));
+};
+//# sourceMappingURL=dropdown.js.map