@wallarm-org/design-system 1.28.2-rc-fix-table-window-scroll-root.1 → 1.29.0

package/dist/components/FilterDropdown/FilterDropdownOption.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { useTestId } from "../../utils/testId.js";
+import { SelectOption } from "../Select/SelectOption.js";
+import { SelectOptionHint } from "../Select/SelectOptionHint.js";
+import { SelectOptionIndicator } from "../Select/SelectOptionIndicator.js";
+import { SelectOptionText } from "../Select/SelectOptionText.js";
+import { FilterDropdownAliasContext, useFilterDropdownContext } from "./FilterDropdownContext.js";
+const FilterDropdownOption = ({ item, hint, children, 'data-testid': testIdProp, ...props })=>{
+    const { collection } = useFilterDropdownContext();
+    const alias = useContext(FilterDropdownAliasContext);
+    const value = collection.getItemValue(item);
+    const isCopy = alias?.source !== void 0 && collection.getItemValue(alias.source) === value;
+    const copyTestId = useTestId('selected-option');
+    return /*#__PURE__*/ jsxs(SelectOption, {
+        ...props,
+        item: isCopy && alias ? alias : item,
+        "data-slot": "filter-dropdown-option",
+        "data-testid": testIdProp ?? (isCopy ? copyTestId : void 0),
+        children: [
+            /*#__PURE__*/ jsx(SelectOptionText, {
+                children: children ?? collection.stringifyItem(item)
+            }),
+            null != hint && /*#__PURE__*/ jsx(SelectOptionHint, {
+                children: hint
+            }),
+            /*#__PURE__*/ jsx(SelectOptionIndicator, {})
+        ]
+    });
+};
+FilterDropdownOption.displayName = 'FilterDropdownOption';
+export { FilterDropdownOption };

package/dist/components/FilterDropdown/FilterDropdownSearch.d.ts

@@ -0,0 +1,12 @@
+import type { FC } from 'react';
+import { type TestableProps } from '../../utils/testId';
+import { type SelectSearchInputProps } from '../Select/SelectSearchInput';
+export interface FilterDropdownSearchProps extends Omit<SelectSearchInputProps, 'value' | 'onChange' | 'data-testid'>, TestableProps {
+    /** Called after the query changes; the root owns the query itself. */
+    onChange?: (query: string) => void;
+}
+/**
+ * The search field pinned above the list. Renders only once the collection reaches
+ * `searchThreshold` items, and takes focus when the menu opens. Attributes land on the `<input>`.
+ */
+export declare const FilterDropdownSearch: FC<FilterDropdownSearchProps>;

package/dist/components/FilterDropdown/FilterDropdownSearch.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { useSelectContext } from "@ark-ui/react/select";
+import { useTestId } from "../../utils/testId.js";
+import { SelectSearchInput } from "../Select/SelectSearchInput.js";
+import { useFilterDropdownContext } from "./FilterDropdownContext.js";
+const FilterDropdownSearch = ({ onChange, 'aria-label': ariaLabel, 'data-testid': testIdProp, ...props })=>{
+    const { label, query, setQuery, isSearchable } = useFilterDropdownContext();
+    const testId = useTestId('search', testIdProp);
+    const select = useSelectContext();
+    if (!isSearchable) return null;
+    const handleChange = (next)=>{
+        setQuery(next);
+        onChange?.(next);
+    };
+    const highlighted = select.highlightedItem;
+    const activeDescendant = highlighted ? select.getItemProps({
+        item: highlighted
+    }).id : void 0;
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "filter-dropdown-search",
+        className: "-mb-3",
+        children: /*#__PURE__*/ jsx(SelectSearchInput, {
+            "data-autofocus": "",
+            role: "combobox",
+            "aria-autocomplete": "list",
+            "aria-expanded": select.open,
+            "aria-controls": select.getContentProps().id,
+            "aria-activedescendant": activeDescendant,
+            ...props,
+            "aria-label": ariaLabel ?? `Search ${label}`,
+            value: query,
+            onChange: handleChange,
+            "data-testid": testId
+        })
+    });
+};
+FilterDropdownSearch.displayName = 'FilterDropdownSearch';
+export { FilterDropdownSearch };

package/dist/components/FilterDropdown/FilterDropdownSelected.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { CollectionItem } from '@ark-ui/react/collection';
+import { SelectGroup } from '../Select/SelectGroup';
+export interface FilterDropdownSelectedProps<T extends CollectionItem = CollectionItem> extends Omit<ComponentProps<typeof SelectGroup>, 'children'> {
+    /** @default 'Selected' */
+    label?: ReactNode;
+    /**
+     * Renders one row; return the same `FilterDropdownOption` as in the list (hint included) and it
+     * becomes this row's copy. Defaults to a plain option with the item's label.
+     */
+    children?: (item: T) => ReactNode;
+}
+export declare function FilterDropdownSelected<T extends CollectionItem>({ label, children, 'data-testid': testIdProp, ...props }: FilterDropdownSelectedProps<T>): import("react").JSX.Element | null;
+export declare namespace FilterDropdownSelected {
+    var displayName: string;
+}

package/dist/components/FilterDropdown/FilterDropdownSelected.js

@@ -0,0 +1,38 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useTestId } from "../../utils/testId.js";
+import { SelectGroup } from "../Select/SelectGroup.js";
+import { SelectGroupLabel } from "../Select/SelectGroupLabel.js";
+import { SelectSeparator } from "../Select/SelectSeparator.js";
+import { FilterDropdownAliasContext, useFilterDropdownContext } from "./FilterDropdownContext.js";
+import { FilterDropdownOption } from "./FilterDropdownOption.js";
+const FilterDropdownSelected = ({ label = 'Selected', children, 'data-testid': testIdProp, ...props })=>{
+    const { showSelected, aliasItems } = useFilterDropdownContext();
+    const testId = useTestId('selected', testIdProp);
+    if (!showSelected) return null;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(SelectGroup, {
+                ...props,
+                "data-slot": "filter-dropdown-selected",
+                "data-testid": testId,
+                children: [
+                    /*#__PURE__*/ jsx(SelectGroupLabel, {
+                        children: label
+                    }),
+                    aliasItems.map((alias)=>{
+                        const source = alias.source;
+                        return /*#__PURE__*/ jsx(FilterDropdownAliasContext.Provider, {
+                            value: alias,
+                            children: children ? children(source) : /*#__PURE__*/ jsx(FilterDropdownOption, {
+                                item: source
+                            })
+                        }, alias.value);
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(SelectSeparator, {})
+        ]
+    });
+};
+FilterDropdownSelected.displayName = 'FilterDropdownSelected';
+export { FilterDropdownSelected };

package/dist/components/FilterDropdown/FilterDropdownTrigger.d.ts

@@ -0,0 +1,16 @@
+import { type ButtonHTMLAttributes, type FC, type ReactNode, type Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface FilterDropdownTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>, TestableProps {
+    ref?: Ref<HTMLButtonElement>;
+    /**
+     * Only a `<FilterDropdownClear />`, to replace the ✕ rendered in multi mode. The label is
+     * derived from the value and is not overridable.
+     */
+    children?: ReactNode;
+}
+/**
+ * The 36px trigger. Dashed while unset, solid once set; reads «All …» / the value in single mode
+ * and «Name», «Name • value» or «Name • N» in multi mode. In multi mode Backspace/Delete on the
+ * focused trigger clears the filter.
+ */
+export declare const FilterDropdownTrigger: FC<FilterDropdownTriggerProps>;

package/dist/components/FilterDropdown/FilterDropdownTrigger.js

@@ -0,0 +1,139 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Children, isValidElement } from "react";
+import { Select } from "@ark-ui/react/select";
+import { cn } from "../../utils/cn.js";
+import { mergeRefs } from "../../utils/mergeRefs.js";
+import { TestIdProvider, useTestId } from "../../utils/testId.js";
+import { NumericBadge } from "../NumericBadge/index.js";
+import { OverflowTooltip, OverflowTooltipContent, OverflowTooltipTrigger } from "../OverflowTooltip/index.js";
+import { SelectArrow } from "../Select/SelectArrow.js";
+import { filterDropdownControlVariants, filterDropdownLabelVariants, filterDropdownTriggerVariants } from "./classes.js";
+import { FilterDropdownClear } from "./FilterDropdownClear.js";
+import { useFilterDropdownContext } from "./FilterDropdownContext.js";
+const CLEAR_KEYS = new Set([
+    'Backspace',
+    'Delete'
+]);
+const TruncatedText = ({ text, emphasis, className })=>/*#__PURE__*/ jsx(TestIdProvider, {
+        value: void 0,
+        children: /*#__PURE__*/ jsxs(OverflowTooltip, {
+            children: [
+                /*#__PURE__*/ jsx(OverflowTooltipTrigger, {
+                    children: /*#__PURE__*/ jsx("span", {
+                        className: cn(filterDropdownLabelVariants({
+                            emphasis
+                        }), className),
+                        children: text
+                    })
+                }),
+                /*#__PURE__*/ jsx(OverflowTooltipContent, {
+                    children: text
+                })
+            ]
+        })
+    });
+const Separator = ()=>/*#__PURE__*/ jsx("span", {
+        "aria-hidden": true,
+        className: "shrink-0 text-xs text-text-tertiary",
+        children: "•"
+    });
+const FilterDropdownTrigger = ({ ref, className, children, onKeyDown, 'aria-label': ariaLabel, 'data-testid': testIdProp, ...props })=>{
+    const { label, allLabel, multiple, value, collection, clear, triggerRef } = useFilterDropdownContext();
+    const controlTestId = useTestId('control');
+    const testId = useTestId('trigger', testIdProp);
+    const isSet = value.length > 0;
+    const clearable = multiple && isSet;
+    const labels = value.map((v)=>collection.stringify(v) ?? v);
+    const customClear = Children.toArray(children).find((child)=>/*#__PURE__*/ isValidElement(child) && child.type === FilterDropdownClear);
+    const handleKeyDown = (event)=>{
+        onKeyDown?.(event);
+        if (event.defaultPrevented || !clearable || !CLEAR_KEYS.has(event.key)) return;
+        event.preventDefault();
+        clear();
+    };
+    let content;
+    let composedLabel = label;
+    if (multiple) if (isSet) if (1 === value.length) {
+        content = /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(TruncatedText, {
+                    text: label,
+                    emphasis: "name"
+                }),
+                /*#__PURE__*/ jsx(Separator, {}),
+                /*#__PURE__*/ jsx(TruncatedText, {
+                    text: labels[0] ?? '',
+                    emphasis: "value",
+                    className: "min-w-24"
+                })
+            ]
+        });
+        composedLabel = `${label}, ${labels[0]}`;
+    } else {
+        content = /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(TruncatedText, {
+                    text: label,
+                    emphasis: "name"
+                }),
+                /*#__PURE__*/ jsx(Separator, {}),
+                /*#__PURE__*/ jsx("span", {
+                    "aria-hidden": true,
+                    className: "inline-flex shrink-0",
+                    children: /*#__PURE__*/ jsx(NumericBadge, {
+                        type: "primary",
+                        children: value.length
+                    })
+                })
+            ]
+        });
+        composedLabel = `${label}, ${value.length} selected: ${labels.join(', ')}`;
+    }
+    else content = /*#__PURE__*/ jsx(TruncatedText, {
+        text: label,
+        emphasis: "name"
+    });
+    else {
+        content = isSet ? /*#__PURE__*/ jsx(TruncatedText, {
+            text: labels[0] ?? '',
+            emphasis: "value"
+        }) : /*#__PURE__*/ jsx(TruncatedText, {
+            text: allLabel,
+            emphasis: "name"
+        });
+        if (isSet) composedLabel = `${label}, ${labels[0]}`;
+    }
+    return /*#__PURE__*/ jsxs(Select.Control, {
+        "data-slot": "filter-dropdown-control",
+        "data-testid": controlTestId,
+        className: filterDropdownControlVariants({
+            applied: isSet,
+            clearable
+        }),
+        children: [
+            /*#__PURE__*/ jsxs(Select.Trigger, {
+                ...props,
+                ref: mergeRefs(ref, triggerRef),
+                "data-slot": "filter-dropdown-trigger",
+                "data-testid": testId,
+                "aria-label": ariaLabel ?? composedLabel,
+                onKeyDown: handleKeyDown,
+                className: cn(filterDropdownTriggerVariants({
+                    clearable
+                }), className),
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "flex min-w-0 items-center gap-4 overflow-hidden",
+                        children: content
+                    }),
+                    !clearable && /*#__PURE__*/ jsx(SelectArrow, {
+                        className: "text-icon-primary"
+                    })
+                ]
+            }),
+            customClear ?? /*#__PURE__*/ jsx(FilterDropdownClear, {})
+        ]
+    });
+};
+FilterDropdownTrigger.displayName = 'FilterDropdownTrigger';
+export { FilterDropdownTrigger };

package/dist/components/FilterDropdown/classes.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The pill that holds the trigger and, when a multi filter is set, the ✕. It owns the border,
+ * surface and state overlays so the two buttons read as one control (Figma `filter-dropdown`).
+ */
+export declare const filterDropdownControlVariants: (props?: ({
+    applied?: boolean | null | undefined;
+    clearable?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const filterDropdownTriggerVariants: (props?: ({
+    clearable?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const filterDropdownLabelVariants: (props?: ({
+    emphasis?: "name" | "value" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const filterDropdownClearClassName: string;
+export declare const filterDropdownContentClassName: string;

package/dist/components/FilterDropdown/classes.js

@@ -0,0 +1,43 @@
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const filterDropdownControlVariants = cva(cn('inline-flex h-36 min-w-0 max-w-180 items-stretch', 'rounded-12 border-1 border-border-primary bg-component-outline-button-bg', 'font-sans text-sm text-text-primary', 'overlay hover:not-data-disabled:overlay-states-primary-hover', 'active:not-data-disabled:overlay-states-primary-pressed data-[state=open]:overlay-states-primary-pressed', 'transition-[border,box-shadow,opacity]', 'has-[[data-slot=filter-dropdown-trigger]:focus-visible]:ring-3 has-[[data-slot=filter-dropdown-trigger]:focus-visible]:ring-focus-primary', 'data-disabled:opacity-50 data-disabled:cursor-not-allowed'), {
+    variants: {
+        applied: {
+            true: 'border-solid shadow-2xs has-[[data-slot=filter-dropdown-trigger]:focus-visible]:shadow-none',
+            false: 'border-dashed'
+        },
+        clearable: {
+            true: 'pr-6',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        applied: false,
+        clearable: false
+    }
+});
+const filterDropdownTriggerVariants = cva(cn('flex min-w-0 flex-1 items-center gap-8 py-8 pl-16', 'cursor-pointer outline-none disabled:cursor-not-allowed', '[&_svg]:pointer-events-none [&_svg]:shrink-0'), {
+    variants: {
+        clearable: {
+            true: 'pr-4',
+            false: 'pr-10'
+        }
+    },
+    defaultVariants: {
+        clearable: false
+    }
+});
+const filterDropdownLabelVariants = cva('min-w-0 truncate', {
+    variants: {
+        emphasis: {
+            value: 'font-medium',
+            name: 'font-normal'
+        }
+    },
+    defaultVariants: {
+        emphasis: 'name'
+    }
+});
+const filterDropdownClearClassName = cn('inline-flex size-24 shrink-0 items-center justify-center self-center rounded-6', 'cursor-pointer text-icon-secondary transition-colors hover:not-disabled:text-icon-primary', 'outline-none focus-visible:ring-3 focus-visible:ring-focus-primary', 'disabled:cursor-not-allowed [&_svg]:icon-md [&_svg]:pointer-events-none');
+const filterDropdownContentClassName = cn('min-w-128 max-w-360', 'max-h-[min(340px,var(--available-height))]');
+export { filterDropdownClearClassName, filterDropdownContentClassName, filterDropdownControlVariants, filterDropdownLabelVariants, filterDropdownTriggerVariants };

package/dist/components/FilterDropdown/index.d.ts

@@ -0,0 +1,15 @@
+export { filterDropdownControlVariants, filterDropdownTriggerVariants } from './classes';
+export { FilterDropdown, type FilterDropdownOpenChangeDetails, type FilterDropdownProps, type FilterDropdownValueChangeDetails, } from './FilterDropdown';
+export { FilterDropdownAllOption, type FilterDropdownAllOptionProps, } from './FilterDropdownAllOption';
+export { FilterDropdownClear, type FilterDropdownClearProps } from './FilterDropdownClear';
+export { FilterDropdownContent, type FilterDropdownContentProps } from './FilterDropdownContent';
+export { type UseFilterDropdownResult, useFilterDropdown } from './FilterDropdownContext';
+export { FilterDropdownEmpty, type FilterDropdownEmptyProps } from './FilterDropdownEmpty';
+export { FilterDropdownFooter, type FilterDropdownFooterProps } from './FilterDropdownFooter';
+export { FilterDropdownFooterClear, type FilterDropdownFooterClearProps, } from './FilterDropdownFooterClear';
+export { FilterDropdownGroup, type FilterDropdownGroupProps } from './FilterDropdownGroup';
+export { FilterDropdownGroupLabel, type FilterDropdownGroupLabelProps, } from './FilterDropdownGroupLabel';
+export { FilterDropdownOption, type FilterDropdownOptionProps } from './FilterDropdownOption';
+export { FilterDropdownSearch, type FilterDropdownSearchProps } from './FilterDropdownSearch';
+export { FilterDropdownSelected, type FilterDropdownSelectedProps } from './FilterDropdownSelected';
+export { FilterDropdownTrigger, type FilterDropdownTriggerProps } from './FilterDropdownTrigger';

package/dist/components/FilterDropdown/index.js

@@ -0,0 +1,15 @@
+export { filterDropdownControlVariants, filterDropdownTriggerVariants } from "./classes.js";
+export { FilterDropdown } from "./FilterDropdown.js";
+export { FilterDropdownAllOption } from "./FilterDropdownAllOption.js";
+export { FilterDropdownClear } from "./FilterDropdownClear.js";
+export { FilterDropdownContent } from "./FilterDropdownContent.js";
+export { useFilterDropdown } from "./FilterDropdownContext.js";
+export { FilterDropdownEmpty } from "./FilterDropdownEmpty.js";
+export { FilterDropdownFooter } from "./FilterDropdownFooter.js";
+export { FilterDropdownFooterClear } from "./FilterDropdownFooterClear.js";
+export { FilterDropdownGroup } from "./FilterDropdownGroup.js";
+export { FilterDropdownGroupLabel } from "./FilterDropdownGroupLabel.js";
+export { FilterDropdownOption } from "./FilterDropdownOption.js";
+export { FilterDropdownSearch } from "./FilterDropdownSearch.js";
+export { FilterDropdownSelected } from "./FilterDropdownSelected.js";
+export { FilterDropdownTrigger } from "./FilterDropdownTrigger.js";

package/dist/components/FilterDropdown/lib/index.d.ts

@@ -0,0 +1 @@
+export { ALL_VALUE, createAliasItem, createAllItem, type FilterDropdownSpecialItem, isAliasValue, isSpecialItem, SELECTED_PREFIX, toAliasValue, toBaseValue, toConsumerValue, toInternalValue, } from './values';

package/dist/components/FilterDropdown/lib/index.js

@@ -0,0 +1 @@
+export { ALL_VALUE, SELECTED_PREFIX, createAliasItem, createAllItem, isAliasValue, isSpecialItem, toAliasValue, toBaseValue, toConsumerValue, toInternalValue } from "./values.js";

package/dist/components/FilterDropdown/lib/values.d.ts

@@ -0,0 +1,59 @@
+import type { CollectionItem, ListCollection } from '@ark-ui/react/collection';
+/**
+ * Value of the single-mode «All …» option inside Ark. The consumer never sees it: it maps to `[]`.
+ */
+export declare const ALL_VALUE = "__all__";
+/**
+ * Prefix of the alias values that back the rows of the multi-mode "Selected" section. Ark keys
+ * items by value, so a row rendered twice needs a second value; the root strips the prefix before
+ * anything reaches the consumer.
+ */
+export declare const SELECTED_PREFIX = "__selected__:";
+declare const SPECIAL: unique symbol;
+/** An item that exists only inside the Ark collection: the «All» sentinel or a "Selected" alias. */
+export interface FilterDropdownSpecialItem<T extends CollectionItem = CollectionItem> {
+    readonly [SPECIAL]: true;
+    readonly value: string;
+    readonly label: string;
+    /** The base item an alias duplicates; absent on the «All» sentinel. */
+    readonly source?: T;
+}
+export declare const isSpecialItem: (item: unknown) => item is FilterDropdownSpecialItem;
+export declare const toAliasValue: (value: string) => string;
+export declare const isAliasValue: (value: string) => boolean;
+export declare const toBaseValue: (value: string) => string;
+export declare const createAllItem: (label: string) => FilterDropdownSpecialItem;
+export declare const createAliasItem: <T extends CollectionItem>(item: T, collection: ListCollection<T>) => FilterDropdownSpecialItem<T>;
+interface ToInternalValueOptions {
+    multiple: boolean;
+    /** Base values that currently have an alias row in the "Selected" section. */
+    aliased: ReadonlySet<string>;
+    /**
+     * Single mode: the «All» row is in the collection. Without it an unset value stays `[]`, so Ark
+     * never selects or highlights a value it cannot find.
+     * @default true
+     */
+    hasAll?: boolean;
+}
+/**
+ * Consumer value → the value handed to Ark.
+ * - single: `[]` becomes the «All» sentinel, so «All» shows as picked;
+ * - multi: every picked value that has an alias row is doubled with its alias, so the copy in
+ *   "Selected" and the original in the list tick together.
+ */
+export declare const toInternalValue: (value: readonly string[], { multiple, aliased, hasAll }: ToInternalValueOptions) => string[];
+interface ToConsumerValueOptions {
+    multiple: boolean;
+    /** The internal value Ark had before this change. */
+    previousInternal: readonly string[];
+    /** The consumer value before this change. */
+    previousValue: readonly string[];
+}
+/**
+ * Ark's next value → consumer value. Never returns the sentinel or an alias.
+ * - single: the sentinel (or nothing) becomes `[]`;
+ * - multi: Ark only ever toggles, so the change is read as a diff against what Ark had — an alias
+ *   toggles its base value, which is how unticking a copy in "Selected" unticks the original.
+ */
+export declare const toConsumerValue: (next: readonly string[], { multiple, previousInternal, previousValue }: ToConsumerValueOptions) => string[];
+export {};

package/dist/components/FilterDropdown/lib/values.js

@@ -0,0 +1,58 @@
+const ALL_VALUE = '__all__';
+const SELECTED_PREFIX = '__selected__:';
+const SPECIAL = Symbol('filter-dropdown-special-item');
+const isSpecialItem = (item)=>'object' == typeof item && null !== item && SPECIAL in item;
+const toAliasValue = (value)=>`${SELECTED_PREFIX}${value}`;
+const isAliasValue = (value)=>value.startsWith(SELECTED_PREFIX);
+const toBaseValue = (value)=>isAliasValue(value) ? value.slice(SELECTED_PREFIX.length) : value;
+const createAllItem = (label)=>({
+        [SPECIAL]: true,
+        value: ALL_VALUE,
+        label
+    });
+const createAliasItem = (item, collection)=>({
+        [SPECIAL]: true,
+        value: toAliasValue(collection.getItemValue(item) ?? ''),
+        label: collection.stringifyItem(item) ?? '',
+        source: item
+    });
+const toInternalValue = (value, { multiple, aliased, hasAll = true })=>{
+    if (!multiple) {
+        const [first] = value;
+        if (void 0 === first) return hasAll ? [
+            ALL_VALUE
+        ] : [];
+        return [
+            first
+        ];
+    }
+    return [
+        ...value,
+        ...value.filter((v)=>aliased.has(v)).map(toAliasValue)
+    ];
+};
+const toConsumerValue = (next, { multiple, previousInternal, previousValue })=>{
+    if (!multiple) {
+        const [first] = next;
+        return void 0 === first || first === ALL_VALUE ? [] : [
+            toBaseValue(first)
+        ];
+    }
+    const before = new Set(previousInternal);
+    const after = new Set(next);
+    let result = [
+        ...previousValue
+    ];
+    for (const v of next){
+        if (before.has(v) || v === ALL_VALUE) continue;
+        const base = toBaseValue(v);
+        if (!result.includes(base)) result.push(base);
+    }
+    for (const v of previousInternal){
+        if (after.has(v)) continue;
+        const base = toBaseValue(v);
+        result = result.filter((r)=>r !== base);
+    }
+    return result;
+};
+export { ALL_VALUE, SELECTED_PREFIX, createAliasItem, createAllItem, isAliasValue, isSpecialItem, toAliasValue, toBaseValue, toConsumerValue, toInternalValue };

package/dist/components/Select/Select.d.ts

@@ -6,7 +6,7 @@ export interface SelectBaseProps {
     /** Override default floating positioning (merged with DS defaults). */
     positioning?: SelectRootProps<CollectionItem>['positioning'];
 }
-type SelectProps<T extends CollectionItem> = SelectNativeProps<T> & SelectBaseProps & TestableProps;
+export type SelectProps<T extends CollectionItem> = SelectNativeProps<T> & SelectBaseProps & TestableProps;
 export declare function Select<T extends CollectionItem>({ children, loading, disabled, positioning: positioningOverride, 'data-testid': testId, ...props }: SelectProps<T>): import("react").JSX.Element;
 export declare namespace Select {
     var displayName: string;

package/dist/components/Select/SelectContent.d.ts

@@ -1,5 +1,6 @@
 import { type FC } from 'react';
 import { Select as ArkUiSelect } from '@ark-ui/react/select';
-type SelectContentProps = Omit<ArkUiSelect.ContentProps, 'className'>;
+import { type TestableProps } from '../../utils/testId';
+type SelectContentProps = Omit<ArkUiSelect.ContentProps, 'className'> & TestableProps;
 export declare const SelectContent: FC<SelectContentProps>;
 export {};

package/dist/components/Select/SelectContent.js

@@ -5,8 +5,8 @@ import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport } from "../ScrollArea/index.js";
 import { SelectEmptyState } from "./SelectEmptyState.js";
-const SelectContent = ({ children, ...props })=>{
-    const testId = useTestId('content');
+const SelectContent = ({ children, 'data-testid': testIdProp, ...props })=>{
+    const testId = useTestId('content', testIdProp);
     const isEmpty = 0 === Children.count(children);
     return /*#__PURE__*/ jsx(Select.List, {
         ...props,
@@ -16,6 +16,7 @@ const SelectContent = ({ children, ...props })=>{
         children: /*#__PURE__*/ jsxs(ScrollArea, {
             children: [
                 /*#__PURE__*/ jsx(ScrollAreaViewport, {
+                    "data-no-autofocus": "",
                     children: /*#__PURE__*/ jsx(ScrollAreaContent, {
                         className: "flex flex-col gap-1",
                         children: isEmpty ? /*#__PURE__*/ jsx(SelectEmptyState, {}) : children

package/dist/components/Select/SelectEmptyState.d.ts

@@ -1,5 +1,6 @@
 import type { FC, ReactNode } from 'react';
 export interface SelectEmptyStateProps {
     description?: ReactNode;
+    className?: string;
 }
 export declare const SelectEmptyState: FC<SelectEmptyStateProps>;

package/dist/components/Select/SelectEmptyState.js

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { EmptyState, EmptyStateDescription, EmptyStateMessage } from "../EmptyState/index.js";
-const SelectEmptyState = ({ description = 'No results' })=>/*#__PURE__*/ jsx(EmptyState, {
+const SelectEmptyState = ({ description = 'No results', className })=>/*#__PURE__*/ jsx(EmptyState, {
         type: "no-results",
+        className: className,
         children: /*#__PURE__*/ jsx(EmptyStateMessage, {
             children: /*#__PURE__*/ jsx(EmptyStateDescription, {
                 children: description

package/dist/components/Select/SelectFooter.d.ts

@@ -1,3 +1,8 @@
-import type { FC, HTMLAttributes } from 'react';
-export type SelectFooterProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+import type { FC, HTMLAttributes, Ref } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import { type TestableProps } from '../../utils/testId';
+import { selectFooterVariants } from './classes';
+export type SelectFooterProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'> & VariantProps<typeof selectFooterVariants> & TestableProps & {
+    ref?: Ref<HTMLDivElement>;
+};
 export declare const SelectFooter: FC<SelectFooterProps>;

package/dist/components/Select/SelectFooter.js

@@ -1,12 +1,15 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
-const SelectFooter = (props)=>{
-    const testId = useTestId('footer');
+import { selectFooterVariants } from "./classes.js";
+const SelectFooter = ({ variant = 'default', 'data-testid': testIdProp, ...props })=>{
+    const testId = useTestId('footer', testIdProp);
     return /*#__PURE__*/ jsx("div", {
         ...props,
         "data-testid": testId,
-        className: cn('bg-component-outline-button-bg py-8 px-16 shrink-0 border-t border-border-primary')
+        className: cn(selectFooterVariants({
+            variant
+        }))
     });
 };
 SelectFooter.displayName = 'SelectFooter';

package/dist/components/Select/SelectGroup.d.ts

@@ -1,2 +1,8 @@
-import type { FC, PropsWithChildren } from 'react';
-export declare const SelectGroup: FC<PropsWithChildren>;
+import type { FC, Ref } from 'react';
+import { Select as ArkUiSelect } from '@ark-ui/react/select';
+import { type TestableProps } from '../../utils/testId';
+type SelectGroupProps = Omit<ArkUiSelect.ItemGroupProps, 'className'> & TestableProps & {
+    ref?: Ref<HTMLDivElement>;
+};
+export declare const SelectGroup: FC<SelectGroupProps>;
+export {};

package/dist/components/Select/SelectGroup.js

@@ -2,9 +2,10 @@ import { jsx } from "react/jsx-runtime";
 import { Select } from "@ark-ui/react/select";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
-const SelectGroup = ({ children })=>{
-    const testId = useTestId('group');
+const SelectGroup = ({ children, 'data-testid': testIdProp, ...props })=>{
+    const testId = useTestId('group', testIdProp);
     return /*#__PURE__*/ jsx(Select.ItemGroup, {
+        ...props,
         "data-testid": testId,
         className: cn('flex flex-col gap-1'),
         children: children