thread-ui 0.5.0 → 0.7.0

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, hideReset, neutralWhenInactive, showSortLabel, }: SortControlsProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,58 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from '../../../styled-system/css';
+import { Button, Icon, Text } from '../../../components';
+import { OptionalIconButton } from '../../../internal-components';
+const styles = {
+    container: cva({
+        base: {
+            display: 'flex',
+            flexDirection: 'row',
+        },
+        variants: {
+            inner: {
+                true: {},
+                false: {
+                    alignItems: 'start',
+                    flexDirection: 'column',
+                },
+            },
+            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, hideReset = false, neutralWhenInactive = false, showSortLabel = false, }) => {
+    const getState = (key) => activeSort.find((s) => s.key === key);
+    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

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

@@ -0,0 +1,68 @@
+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` */
+    multiSort?: 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;
+    /** 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/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, multiSort, 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, multiSort = 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 multiSort ? [...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, color, }: 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, color, }) => {
+    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, color: color }));
+};
+//# sourceMappingURL=dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../../../src/components/form-elements/dropdowns/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAG1C,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAE9D,MAAM,UAAU,GAAG,GAAG,CAAC;IACtB,IAAI,EAAE;QACL,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,GAAG;QACb,QAAQ,EAAE,GAAG;QACb,MAAM,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE;KACtC;IACD,QAAQ,EAAE;QACT,UAAU,EAAE;YACX,IAAI,EAAE,EAAE,eAAe,EAAE,UAAU,EAAE;SACrC;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACxB,EAAE,EACF,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,qBAAqB,EACnC,IAAI,EACJ,KAAK,GACU,EAAE,EAAE;IACnB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IAE5D,MAAM,YAAY,GAAG,CAAC,MAAsB,EAAE,EAAE;QAC/C,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACvB,SAAS,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,OAAO,CACN,KAAC,YAAY,IACZ,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,EAC1C,OAAO,EAAE,GAAG,EAAE;YACb,SAAS,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC,EACD,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,EACrD,UAAU,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,aAEC,SAAS,EAAE,UAAU,CAAC,EAAE,UAAU,EAAE,MAAM,CAAC,KAAK,KAAK,QAAQ,EAAE,KAAK,EAAE,CAAC,EACvE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,YAElC,MAAM,CAAC,KAAK,IAJR,KAAK,CAKN,CACL,EACD,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,GACX,CACF,CAAC;AACH,CAAC,CAAC"}

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

@@ -1,3 +1,6 @@
+import { UtilitySizeOptions } from '../../../../types';
+import { DropdownOption } from '../dropdown-base/dropdown-base.types';
+import { ButtonProps } from '../../../../components/ui';
 export type DropdownProps = {
     /** Dropdown ID */
     id?: string;
@@ -11,13 +14,8 @@ export type DropdownProps = {
     onSelect: (value: string | number) => void;
     /** Placeholder text shown when no value is selected @default 'Select an option...' */
     placeholder?: string;
-};
-/**
- * A single option in the Dropdown list.
- */
-export type DropdownOption = {
-    /** Display text shown in the list */
-    label: string;
-    /** Value passed to `onSelect` when this option is chosen */
-    value: string | number;
+    /** Size of Form Label @default `'md'`` */
+    size?: UtilitySizeOptions;
+    /** Dropdown Color @default 'neutral' */
+    color?: ButtonProps['color'];
 };

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.types.js","sourceRoot":"","sources":["../../../../../src/components/form-elements/dropdowns/dropdown/dropdown.types.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/form-elements/dropdowns/dropdown/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.d.ts

@@ -0,0 +1,8 @@
+import { DropdownBaseProps } from './dropdown-base.types';
+export declare const styles: {
+    container: string;
+    interior: string;
+    surfaceButton: string;
+    list: string;
+};
+export declare const DropdownBase: ({ id, title, isOpen, onClose, onToggle, triggerLabel, renderItem, options, listHeader, size, icon, color, }: DropdownBaseProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { InputWrapper } from '../../input-wrapper';
+import { FormLabel } from '../../form-label';
+import { Icon } from '../../../../components/ui';
+import { css } from '../../../../styled-system/css';
+import { useClickOutside } from '../../../../hooks';
+import { getUtilityIconSize } from '../../../../utils';
+import { ConditionalWrapper, OptionalIconButton } from '../../../../internal-components';
+export const styles = {
+    container: css({
+        width: '100%',
+        color: 'text.standard',
+    }),
+    interior: css({
+        width: '100%',
+        position: 'relative',
+    }),
+    surfaceButton: css({
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    }),
+    list: css({
+        backgroundColor: 'background',
+        position: 'absolute',
+        width: 'fit-content',
+        minWidth: '75%',
+        borderWidth: 'md',
+        borderColor: 'structure',
+        borderRadius: 'md',
+        marginTop: '3',
+        boxShadow: 'lg',
+        zIndex: '10',
+        maxHeight: '60',
+        overflow: 'auto',
+    }),
+};
+export const DropdownBase = ({ id, title, isOpen, onClose, onToggle, triggerLabel, renderItem, options, listHeader, size = 'md', icon, color = 'neutral', }) => {
+    const listRef = useRef(null);
+    useClickOutside(listRef, isOpen, onClose, false);
+    return (_jsx("div", { id: id, className: styles.container, children: _jsxs(ConditionalWrapper, { wrapper: title ? InputWrapper : 'fragment', children: [title && _jsx(FormLabel, { size: size, name: title, title: title }), _jsxs("div", { className: styles.interior, children: [_jsxs(OptionalIconButton, { size: size, color: color, onClick: onToggle, type: "button", name: icon, children: [triggerLabel, _jsx(Icon, { name: isOpen ? 'CaretUp' : 'CaretDown', size: getUtilityIconSize(size) })] }), isOpen && (_jsxs("ul", { className: styles.list, ref: listRef, children: [listHeader && _jsx("li", { children: listHeader }), options.map((option, index) => renderItem(option, index))] }))] })] }) }));
+};
+//# sourceMappingURL=dropdown-base.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-base.js","sourceRoot":"","sources":["../../../../../src/components/form-elements/dropdowns/dropdown-base/dropdown-base.tsx"],"names":[],"mappings":"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"}

package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.types.d.ts

@@ -0,0 +1,26 @@
+import { ButtonProps, IconNames } from '../../../../components/ui';
+import { UtilitySizeOptions } from '../../../../types';
+/**
+ * A single option in the Dropdown list.
+ */
+export type DropdownOption = {
+    /** Display text shown in the list */
+    label: string;
+    /** Value passed to `onSelect` when this option is chosen */
+    value: string | number;
+};
+export type DropdownBaseProps = {
+    id?: string;
+    title?: string;
+    placeholder?: string;
+    options: DropdownOption[];
+    isOpen: boolean;
+    onClose: () => void;
+    onToggle: () => void;
+    triggerLabel: string;
+    renderItem: (option: DropdownOption, index: number) => React.ReactNode;
+    listHeader?: React.ReactNode;
+    size?: UtilitySizeOptions;
+    icon?: IconNames;
+    color?: ButtonProps['color'];
+};

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

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

package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-base.types.js","sourceRoot":"","sources":["../../../../../src/components/form-elements/dropdowns/dropdown-base/dropdown-base.types.ts"],"names":[],"mappings":""}

package/dist/components/form-elements/dropdowns/dropdown-base/index.d.ts

@@ -0,0 +1,2 @@
+export type { DropdownBaseProps } from './dropdown-base.types';
+export { DropdownBase } from './dropdown-base';

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

@@ -0,0 +1,2 @@
+export { DropdownBase } from './dropdown-base';
+//# sourceMappingURL=index.js.map

package/dist/components/form-elements/dropdowns/dropdown-base/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/form-elements/dropdowns/dropdown-base/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/form-elements/dropdowns/index.d.ts

@@ -0,0 +1,2 @@
+export * from './dropdown';
+export * from './multi-dropdown';

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

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

package/dist/components/form-elements/dropdowns/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/form-elements/dropdowns/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}

package/dist/components/form-elements/dropdowns/multi-dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export type { MultiDropdownProps } from './multi-dropdown.types';
+export { MultiDropdown } from './multi-dropdown';

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

@@ -0,0 +1,2 @@
+export { MultiDropdown } from './multi-dropdown';
+//# sourceMappingURL=index.js.map

package/dist/components/form-elements/dropdowns/multi-dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/form-elements/dropdowns/multi-dropdown/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.d.ts

@@ -0,0 +1,15 @@
+import { MultiDropdownProps } from './multi-dropdown.types';
+/**
+ * Multi-select dropdown — stays open on selection, renders a count badge
+ * when values are active, and exposes a per-field clear.
+ *
+ * @example
+ * <MultiDropdown
+ *   title="Course"
+ *   options={[{ label: 'Main', value: 'main' }, { label: 'Dessert', value: 'dessert' }]}
+ *   values={selected}
+ *   onToggle={(val) => toggle(val)}
+ *   onClear={() => clear()}
+ * />
+ */
+export declare const MultiDropdown: ({ id, title, options, values, onToggle, onClear, size, icon, showLabel, color, }: MultiDropdownProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,55 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cva, css } from '../../../../styled-system/css';
+import { DropdownBase } from '../dropdown-base/dropdown-base';
+import { Icon, IconButton } from '../../../../components/ui';
+const styles = {
+    itemStyles: cva({
+        base: {
+            cursor: 'pointer',
+            paddingX: '4',
+            paddingY: '2',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '2',
+            _hover: { backgroundColor: 'surface' },
+        },
+        variants: {
+            isSelected: {
+                true: { backgroundColor: 'elevated' },
+            },
+        },
+    }),
+    headerStyles: css({
+        height: '5',
+        paddingX: 3,
+        display: 'flex',
+        flexDirection: 'row',
+    }),
+};
+/**
+ * Multi-select dropdown — stays open on selection, renders a count badge
+ * when values are active, and exposes a per-field clear.
+ *
+ * @example
+ * <MultiDropdown
+ *   title="Course"
+ *   options={[{ label: 'Main', value: 'main' }, { label: 'Dessert', value: 'dessert' }]}
+ *   values={selected}
+ *   onToggle={(val) => toggle(val)}
+ *   onClear={() => clear()}
+ * />
+ */
+export const MultiDropdown = ({ id, title, options, values, onToggle, onClear, size, icon, showLabel = true, color, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const placeholder = !showLabel && title ? title : 'Select...';
+    const triggerLabel = values.length === 0 ? placeholder : `${title ?? 'Selected'} (${values.length})`;
+    return (_jsx(DropdownBase, { id: id, title: showLabel ? title : undefined, options: options, isOpen: isOpen, onToggle: () => setIsOpen((prev) => !prev), onClose: () => {
+            setIsOpen(false);
+        }, listHeader: _jsx("div", { className: styles.headerStyles, children: values.length > 0 && (_jsx(IconButton, { ariaLabel: "Clear selected filters", onClick: onClear, color: "text", name: "X", text: true, size: "sm", children: "Clear" })) }), triggerLabel: triggerLabel, renderItem: (option, index) => {
+            const isSelected = values.includes(option.value);
+            return (_jsxs("li", { className: styles.itemStyles({ isSelected }), onClick: () => onToggle(option.value), children: [_jsx(Icon, { name: isSelected ? 'CheckSquare' : 'Square', size: 12 }), option.label] }, index));
+        }, size: size, icon: icon, color: color }));
+};
+//# sourceMappingURL=multi-dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"multi-dropdown.js","sourceRoot":"","sources":["../../../../../src/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.tsx"],"names":[],"mappings":"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"}

package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.types.d.ts

@@ -0,0 +1,25 @@
+import { DropdownOption } from '../dropdown-base/dropdown-base.types';
+import { UtilityColorOptions, UtilitySizeOptions } from '../../../../types';
+import { IconNames } from '../../../../components/ui';
+export type MultiDropdownProps = {
+    /** Defaults to `title` if not provided */
+    id?: string;
+    /** Label displayed on the dropdown trigger button */
+    title?: string;
+    /** List of selectable options */
+    options: DropdownOption[];
+    /** Currently selected values */
+    values: (string | number)[];
+    /** Called when an option is toggled on or off */
+    onToggle: (value: string | number) => void;
+    /** Called when all selected values are cleared */
+    onClear: () => void;
+    /** Icon displayed in the dropdown trigger button */
+    icon?: IconNames;
+    /** Color variant for the trigger button */
+    color?: UtilityColorOptions;
+    /** Size variant for the trigger button @default `'md'` */
+    size?: UtilitySizeOptions;
+    /** Shows the title label above the dropdown @default `true` */
+    showLabel?: boolean;
+};

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

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

package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-dropdown.types.js","sourceRoot":"","sources":["../../../../../src/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.types.ts"],"names":[],"mappings":""}