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

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/NavRail/NavRailItem.d.ts

@@ -10,7 +10,7 @@ export interface NavRailItemProps extends AnchorHTMLAttributes<HTMLAnchorElement
     active?: boolean;
     /** Seats the icon on a soft plate, for the signed-in user's item at the foot of the rail. */
     avatar?: boolean;
-    /** User photo for the plate (implies `avatar`). The icon stays underneath and returns if the photo fails to load. */
+    /** User photo for the plate (implies `avatar`). The icon shows while it loads and if it fails. */
     avatarSrc?: string;
 }
 export declare const NavRailItem: FC<NavRailItemProps>;

package/dist/components/NavRail/NavRailItem.js

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment, useRef, useState } from "react";
+import { Fragment, useRef } from "react";
 import { composeRefs } from "@radix-ui/react-compose-refs";
 import { Slot, Slottable } from "@radix-ui/react-slot";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../Avatar/index.js";
 import { Kbd } from "../Kbd/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { TooltipContent } from "../Tooltip/TooltipContent.js";
@@ -16,8 +17,6 @@ const NavRailItem = ({ ref, asChild = false, icon: Icon, label, shortcut, active
     const testId = useTestId('item', testIdProp);
     const Comp = asChild ? Slot : 'a';
     const internalRef = useRef(null);
-    const [failedSrc, setFailedSrc] = useState();
-    const photo = avatarSrc && avatarSrc !== failedSrc ? avatarSrc : void 0;
     const hasPlate = avatar || void 0 !== avatarSrc;
     const showsLabel = 'expanded' === mode || 'compact' === mode && !hasPlate;
     const fallbackName = showsLabel || 'string' != typeof label ? void 0 : label;
@@ -37,18 +36,16 @@ const NavRailItem = ({ ref, asChild = false, icon: Icon, label, shortcut, active
         children: [
             /*#__PURE__*/ jsx("span", {
                 className: "flex shrink-0 items-center justify-center",
-                children: hasPlate ? /*#__PURE__*/ jsxs("span", {
+                children: hasPlate ? /*#__PURE__*/ jsxs(Avatar, {
+                    size: "xs",
                     "data-slot": "nav-rail-item-avatar",
-                    className: cn('-m-4 grid size-24 place-items-center overflow-hidden rounded-8 bg-states-primary-hover branded:bg-states-brand-hover branded:text-icon-brand *:col-start-1 *:row-start-1', !photo && 'border border-border-primary branded:border-border-brand'),
+                    className: "-m-4",
                     children: [
-                        /*#__PURE__*/ jsx(Icon, {
-                            size: "md"
+                        /*#__PURE__*/ jsx(AvatarImage, {
+                            src: avatarSrc
                         }),
-                        photo && /*#__PURE__*/ jsx("img", {
-                            src: photo,
-                            alt: "",
-                            className: "size-full object-cover",
-                            onError: ()=>setFailedSrc(photo)
+                        /*#__PURE__*/ jsx(AvatarFallback, {
+                            icon: Icon
                         })
                     ]
                 }) : /*#__PURE__*/ jsx(Icon, {

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

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

@@ -1,5 +1,8 @@
-import type { FC } from 'react';
+import type { FC, Ref } from 'react';
 import { Select as ArkUiSelect } from '@ark-ui/react/select';
-type SelectGroupLabelProps = ArkUiSelect.ItemGroupLabelProps;
+import { type TestableProps } from '../../utils/testId';
+type SelectGroupLabelProps = ArkUiSelect.ItemGroupLabelProps & TestableProps & {
+    ref?: Ref<HTMLDivElement>;
+};
 export declare const SelectGroupLabel: FC<SelectGroupLabelProps>;
 export {};

package/dist/components/Select/SelectGroupLabel.js

@@ -3,8 +3,8 @@ import { Select } from "@ark-ui/react/select";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { dropdownMenuLabelVariants } from "../DropdownMenu/index.js";
-const SelectGroupLabel = (props)=>{
-    const testId = useTestId('group-label');
+const SelectGroupLabel = ({ 'data-testid': testIdProp, ...props })=>{
+    const testId = useTestId('group-label', testIdProp);
     return /*#__PURE__*/ jsx(Select.ItemGroupLabel, {
         ...props,
         "data-testid": testId,

package/dist/components/Select/SelectOption.js

@@ -12,7 +12,7 @@ const SelectOption = ({ variant = 'default', 'data-testid': testIdProp, ...props
         className: cn(dropdownMenuItemVariants({
             variant,
             inset: false
-        }), 'flex-wrap relative gap-y-0 gap-x-8 pr-32', 'data-[state=checked]:bg-states-primary-active', 'data-highlighted:bg-states-primary-hover')
+        }), 'flex-wrap relative gap-y-0 gap-x-8 pr-32', 'has-[>[data-slot=select-option-hint]]:flex-nowrap', 'data-[state=checked]:bg-states-primary-active', 'data-highlighted:bg-states-primary-hover')
     });
 };
 SelectOption.displayName = 'SelectOption';

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

@@ -0,0 +1,11 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface SelectOptionHintProps extends HTMLAttributes<HTMLSpanElement>, TestableProps {
+    ref?: Ref<HTMLSpanElement>;
+}
+/**
+ * Secondary text at the right end of an option, such as a count. It sits before the indicator
+ * rather than under it: the option stops wrapping while a hint is present, so the label wraps
+ * inside its own box and the hint keeps its place on the first line.
+ */
+export declare const SelectOptionHint: FC<SelectOptionHintProps>;

package/dist/components/Select/SelectOptionHint.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const SelectOptionHint = ({ ref, className, 'data-testid': testIdProp, ...props })=>{
+    const testId = useTestId('option-hint', testIdProp);
+    return /*#__PURE__*/ jsx("span", {
+        ...props,
+        ref: ref,
+        "data-slot": "select-option-hint",
+        "data-testid": testId,
+        className: cn('ml-auto shrink-0 self-start font-sans text-sm text-text-secondary tabular-nums', className)
+    });
+};
+SelectOptionHint.displayName = 'SelectOptionHint';
+export { SelectOptionHint };

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

@@ -1,5 +1,15 @@
-import type { FC } from 'react';
+import type { FC, Ref } from 'react';
 import { Select as ArkUiSelect } from '@ark-ui/react/select';
-type SelectPositionerProps = ArkUiSelect.PositionerProps;
+export interface SelectPositionerProps extends ArkUiSelect.PositionerProps {
+    /**
+     * Props for the content element (the `listbox` panel inside the positioner) — for a ref, an
+     * inline measurement such as a locked width, or `data-*` attributes. `className` on the
+     * positioner itself already lands on the content, and overrides its default sizes
+     * (`min-w-240 max-w-320 max-h-(--available-height)`) through tailwind-merge.
+     */
+    contentProps?: Omit<ArkUiSelect.ContentProps, 'className' | 'children' | 'asChild'> & {
+        ref?: Ref<HTMLDivElement>;
+        [dataAttribute: `data-${string}`]: string | undefined;
+    };
+}
 export declare const SelectPositioner: FC<SelectPositionerProps>;
-export {};

package/dist/components/Select/SelectPositioner.js

@@ -3,11 +3,12 @@ import { Portal } from "@ark-ui/react/portal";
 import { Select } from "@ark-ui/react/select";
 import { cn } from "../../utils/cn.js";
 import { dropdownMenuClassNames } from "../DropdownMenu/index.js";
-const SelectPositioner = ({ className, children, ...props })=>/*#__PURE__*/ jsx(Portal, {
+const SelectPositioner = ({ className, children, contentProps, ...props })=>/*#__PURE__*/ jsx(Portal, {
         children: /*#__PURE__*/ jsx(Select.Positioner, {
             ...props,
             className: "outline-none",
             children: /*#__PURE__*/ jsx(Select.Content, {
+                ...contentProps,
                 className: cn(dropdownMenuClassNames, 'flex flex-col', 'h-full', 'min-w-240', 'max-w-320', 'max-h-(--available-height)', 'p-0', 'origin-[--transform-origin]', className),
                 children: children
             })