@zvk/ui 0.1.11 → 0.1.12

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.1.12](https://github.com/brandon-schabel/zvk/compare/v0.1.11...v0.1.12) (2026-06-25)
+
+
+### Features
+
+* improve out-of-box DX and UI components ([#24](https://github.com/brandon-schabel/zvk/issues/24)) ([b01272a](https://github.com/brandon-schabel/zvk/commit/b01272a2b35099f5e1fa1dea5883687a0fb4c2e6))
+
 ## [0.1.11](https://github.com/brandon-schabel/zvk/compare/v0.1.10...v0.1.11) (2026-06-20)
 
 

package/dist/components/grid-list/grid-list.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { type CollectionSelectionMode } from "../../internal/collection/index.js";
+export type GridListSelectionMode = CollectionSelectionMode;
+export interface GridListItemState {
+    active: boolean;
+    disabled: boolean;
+    id: string;
+    selected: boolean;
+}
+export interface GridListProps<Item> extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onSelect"> {
+    activeKey?: string;
+    defaultActiveKey?: string;
+    defaultSelectedKeys?: readonly string[];
+    emptyState?: React.ReactNode;
+    getItemId: (item: Item) => string;
+    getItemTextValue?: (item: Item) => string;
+    isItemDisabled?: (item: Item) => boolean;
+    items: readonly Item[];
+    loading?: boolean;
+    loadingState?: React.ReactNode;
+    onAction?: (key: string, item: Item) => void;
+    onActiveKeyChange?: (key: string | undefined) => void;
+    onSelectedKeysChange?: (keys: string[]) => void;
+    ref?: React.Ref<HTMLDivElement>;
+    renderItem: (item: Item, state: GridListItemState) => React.ReactNode;
+    selectedKeys?: readonly string[];
+    selectionMode?: GridListSelectionMode;
+}
+export declare function GridList<Item>({ activeKey, className, defaultActiveKey, defaultSelectedKeys, emptyState, getItemId, getItemTextValue, isItemDisabled, items, loading, loadingState, onAction, onActiveKeyChange, onKeyDown, onSelectedKeysChange, ref, renderItem, role, selectedKeys, selectionMode, ...props }: GridListProps<Item>): React.JSX.Element;

package/dist/components/grid-list/grid-list.js

@@ -0,0 +1,125 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { moveCollectionKey, normalizeSelectionKeys, toggleSelectionKey } from "../../internal/collection/index.js";
+import { cn } from "../../utils/cn.js";
+import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
+function getGridListRecords({ getItemId, getItemTextValue, isItemDisabled, items }) {
+    return items.map((item) => {
+        const id = getItemId(item);
+        return {
+            disabled: isItemDisabled?.(item) ?? false,
+            id,
+            item,
+            textValue: getItemTextValue?.(item) ?? id
+        };
+    });
+}
+export function GridList({ activeKey, className, defaultActiveKey, defaultSelectedKeys = [], emptyState, getItemId, getItemTextValue, isItemDisabled, items, loading = false, loadingState, onAction, onActiveKeyChange, onKeyDown, onSelectedKeysChange, ref, renderItem, role = "grid", selectedKeys, selectionMode = "none", ...props }) {
+    const records = React.useMemo(() => getGridListRecords({ getItemId, getItemTextValue, isItemDisabled, items }), [getItemId, getItemTextValue, isItemDisabled, items]);
+    const navigationItems = records.map((record) => ({
+        disabled: record.disabled,
+        id: record.id,
+        textValue: record.textValue
+    }));
+    const firstEnabledKey = moveCollectionKey(navigationItems, undefined, "first");
+    const rowRefs = React.useRef(new Map());
+    const [currentActiveKey, setCurrentActiveKey] = useControllableState({
+        ...(activeKey !== undefined ? { value: activeKey } : {}),
+        defaultValue: defaultActiveKey ?? firstEnabledKey,
+        ...(onActiveKeyChange ? { onChange: onActiveKeyChange } : {})
+    });
+    const [currentSelectedKeys, setCurrentSelectedKeys] = useControllableState({
+        ...(selectedKeys !== undefined ? { value: normalizeSelectionKeys(selectedKeys) } : {}),
+        defaultValue: normalizeSelectionKeys(defaultSelectedKeys),
+        ...(onSelectedKeysChange ? { onChange: onSelectedKeysChange } : {})
+    });
+    const rovingActiveKey = currentActiveKey ?? firstEnabledKey;
+    React.useLayoutEffect(() => {
+        if (rovingActiveKey === undefined) {
+            return;
+        }
+        const activeRecord = records.find((record) => record.id === rovingActiveKey);
+        if (!activeRecord || activeRecord.disabled) {
+            setCurrentActiveKey(firstEnabledKey);
+        }
+    }, [firstEnabledKey, records, rovingActiveKey, setCurrentActiveKey]);
+    function focusRow(key) {
+        if (key === undefined) {
+            return;
+        }
+        rowRefs.current.get(key)?.focus();
+    }
+    function selectRecord(record) {
+        if (record.disabled) {
+            return;
+        }
+        setCurrentSelectedKeys((keys) => toggleSelectionKey(keys, record.id, selectionMode));
+    }
+    function moveActiveRecord(movement) {
+        const nextKey = moveCollectionKey(navigationItems, rovingActiveKey, movement);
+        setCurrentActiveKey(nextKey);
+        focusRow(nextKey);
+    }
+    return (_jsx("div", { ...props, ref: ref, "aria-busy": loading ? true : props["aria-busy"], "aria-multiselectable": selectionMode === "multiple" ? true : undefined, className: cn("zvk-ui-grid-list", className), "data-loading": loading ? "true" : undefined, "data-selection-mode": selectionMode, onKeyDown: onKeyDown, role: role, children: loading ? (_jsx("div", { className: "zvk-ui-grid-list__loading", role: "status", children: loadingState })) : records.length === 0 ? (_jsx("div", { className: "zvk-ui-grid-list__empty", children: emptyState })) : (records.map((record) => {
+            const selected = currentSelectedKeys.includes(record.id);
+            const active = rovingActiveKey === record.id;
+            const state = {
+                active,
+                disabled: record.disabled,
+                id: record.id,
+                selected
+            };
+            return (_jsx("div", { ref: (node) => {
+                    if (node) {
+                        rowRefs.current.set(record.id, node);
+                    }
+                    else {
+                        rowRefs.current.delete(record.id);
+                    }
+                }, "aria-disabled": record.disabled ? "true" : undefined, "aria-selected": selectionMode === "none" ? undefined : selected ? "true" : "false", className: "zvk-ui-grid-list__row", "data-active": active ? "true" : undefined, "data-disabled": record.disabled ? "true" : undefined, "data-selected": selected ? "true" : undefined, onClick: () => {
+                    if (record.disabled) {
+                        return;
+                    }
+                    setCurrentActiveKey(record.id);
+                    onAction?.(record.id, record.item);
+                }, onFocus: () => {
+                    if (!record.disabled) {
+                        setCurrentActiveKey(record.id);
+                    }
+                }, onKeyDown: composeEventHandlers(undefined, (event) => {
+                    if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+                        event.preventDefault();
+                        moveActiveRecord("next");
+                        return;
+                    }
+                    if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+                        event.preventDefault();
+                        moveActiveRecord("previous");
+                        return;
+                    }
+                    if (event.key === "Home") {
+                        event.preventDefault();
+                        moveActiveRecord("first");
+                        return;
+                    }
+                    if (event.key === "End") {
+                        event.preventDefault();
+                        moveActiveRecord("last");
+                        return;
+                    }
+                    if (event.key === " ") {
+                        event.preventDefault();
+                        selectRecord(record);
+                        return;
+                    }
+                    if (event.key === "Enter") {
+                        event.preventDefault();
+                        if (!record.disabled) {
+                            onAction?.(record.id, record.item);
+                        }
+                    }
+                }), role: "row", tabIndex: record.disabled ? -1 : active ? 0 : -1, children: _jsx("div", { className: "zvk-ui-grid-list__cell", role: "gridcell", children: renderItem(record.item, state) }) }, record.id));
+        })) }));
+}

package/dist/components/grid-list/index.d.ts

@@ -0,0 +1,2 @@
+export { GridList } from "./grid-list.js";
+export type { GridListItemState, GridListProps, GridListSelectionMode } from "./grid-list.js";

package/dist/components/grid-list/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { GridList } from "./grid-list.js";

package/dist/components/index.d.ts

@@ -46,6 +46,8 @@ export { ContextMenu } from "./context-menu/index.js";
 export type { ContextMenuCheckboxItemProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuLabelProps, ContextMenuProps, ContextMenuRadioItemProps, ContextMenuSeparatorProps, ContextMenuTriggerProps } from "./context-menu/index.js";
 export { Menubar } from "./menubar/index.js";
 export type { MenubarCheckboxItemProps, MenubarContentProps, MenubarItemProps, MenubarLabelProps, MenubarMenuProps, MenubarProps, MenubarRadioItemProps, MenubarSeparatorProps, MenubarShortcutProps, MenubarTriggerProps } from "./menubar/index.js";
+export { MultiSelect } from "./multi-select/index.js";
+export type { MultiSelectOption, MultiSelectProps, MultiSelectSize } from "./multi-select/index.js";
 export { EmptyState } from "./empty-state/index.js";
 export type { EmptyStateAlign, EmptyStateProps, EmptyStateSize } from "./empty-state/index.js";
 export { ErrorBoundary, ErrorFallback } from "./error-boundary/index.js";
@@ -62,18 +64,24 @@ export { HoverCard } from "./hover-card/index.js";
 export type { HoverCardContentProps, HoverCardProps, HoverCardTriggerProps } from "./hover-card/index.js";
 export { IconButton } from "./icon-button/index.js";
 export type { IconButtonProps } from "./icon-button/index.js";
+export { GridList } from "./grid-list/index.js";
+export type { GridListItemState, GridListProps, GridListSelectionMode } from "./grid-list/index.js";
 export { Input } from "./input/index.js";
 export type { InputProps, InputSize } from "./input/index.js";
 export { Kbd } from "./kbd/index.js";
 export type { KbdProps, KbdSize } from "./kbd/index.js";
 export { Label } from "./label/index.js";
 export type { LabelProps, LabelSize } from "./label/index.js";
+export { ListRow } from "./list-row/index.js";
+export type { ListRowButtonProps, ListRowDensity, ListRowDescriptionProps, ListRowLinkProps, ListRowProps, ListRowSlotProps, ListRowTitleProps, ListRowVariant } from "./list-row/index.js";
 export { Pagination } from "./pagination/index.js";
 export type { PaginationProps, PaginationRangeItem } from "./pagination/index.js";
 export { Popover } from "./popover/index.js";
 export type { PopoverContentProps, PopoverProps, PopoverTriggerProps } from "./popover/index.js";
 export { Progress } from "./progress/index.js";
 export type { ProgressProps, ProgressSize, ProgressState, ProgressTone } from "./progress/index.js";
+export { Stepper } from "./stepper/index.js";
+export type { StepperItem, StepperItemState, StepperOrientation, StepperProps, StepperStatus } from "./stepper/index.js";
 export { RadioGroup, RadioGroupItem } from "./radio-group/index.js";
 export type { RadioGroupItemProps, RadioGroupOption, RadioGroupOrientation, RadioGroupProps, RadioGroupSize } from "./radio-group/index.js";
 export { Select } from "./select/index.js";
@@ -84,6 +92,8 @@ export { Separator } from "./separator/index.js";
 export type { SeparatorOrientation, SeparatorProps } from "./separator/index.js";
 export { Slider } from "./slider/index.js";
 export type { SliderProps, SliderSize } from "./slider/index.js";
+export { Splitter } from "./splitter/index.js";
+export type { SplitterHandleProps, SplitterOrientation, SplitterPanelProps, SplitterProps, SplitterValue } from "./splitter/index.js";
 export { SidebarShell } from "./sidebar-shell/index.js";
 export type { SidebarShellLandmarkSlotProps, SidebarShellMainProps, SidebarShellProps, SidebarShellSide, SidebarShellSidebarProps, SidebarShellSlotProps, SidebarShellWidth } from "./sidebar-shell/index.js";
 export { SectionedSidebarNav } from "./sectioned-sidebar-nav/index.js";
@@ -100,14 +110,20 @@ export { Table } from "./table/index.js";
 export type { TableBodyProps, TableCaptionProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps } from "./table/index.js";
 export { Tabs } from "./tabs/index.js";
 export type { TabsActivationMode, TabsContentProps, TabsListProps, TabsOrientation, TabsProps, TabsTriggerProps } from "./tabs/index.js";
+export { TagsInput } from "./tags-input/index.js";
+export type { TagsInputProps, TagsInputSize, TagsInputValidationResult } from "./tags-input/index.js";
 export { TabsWithSidebar } from "./tabs-with-sidebar/index.js";
 export type { TabsWithSidebarPanelProps, TabsWithSidebarProps, TabsWithSidebarSidebarProps, TabsWithSidebarWidth } from "./tabs-with-sidebar/index.js";
 export { Textarea } from "./textarea/index.js";
 export type { TextareaProps, TextareaSize } from "./textarea/index.js";
+export { TreeView } from "./tree-view/index.js";
+export type { TreeViewItemState, TreeViewProps, TreeViewSelectionMode } from "./tree-view/index.js";
 export { createToastController, toast, Toast, Toaster, ToastProvider, ToastViewport, useToast } from "./toast/index.js";
 export type { ToasterPosition, ToasterProps, ToastActionInput, ToastActionProps, ToastCloseProps, ToastController, ToastInput, ToastOptions, ToastPlacement, ToastProviderProps, ToastProps, ToastTextProps, ToastTone, ToastViewportProps } from "./toast/index.js";
 export { Tooltip } from "./tooltip/index.js";
 export type { TooltipProps } from "./tooltip/index.js";
+export { Toolbar } from "./toolbar/index.js";
+export type { ToolbarButtonProps, ToolbarGroupProps, ToolbarOrientation, ToolbarProps, ToolbarSeparatorProps, ToolbarToggleProps } from "./toolbar/index.js";
 export { Toggle } from "./toggle/index.js";
 export type { ToggleProps, ToggleSize, ToggleVariant } from "./toggle/index.js";
 export { ToggleGroup } from "./toggle-group/index.js";

package/dist/components/index.js

@@ -22,6 +22,7 @@ export { Command, CommandDialog } from "./command/index.js";
 export { Combobox } from "./combobox/index.js";
 export { ContextMenu } from "./context-menu/index.js";
 export { Menubar } from "./menubar/index.js";
+export { MultiSelect } from "./multi-select/index.js";
 export { EmptyState } from "./empty-state/index.js";
 export { ErrorBoundary, ErrorFallback } from "./error-boundary/index.js";
 export { Field } from "./field/index.js";
@@ -30,17 +31,21 @@ export { FileUploadInput } from "./file-upload-input/index.js";
 export { FileDropzone } from "./file-dropzone/index.js";
 export { HoverCard } from "./hover-card/index.js";
 export { IconButton } from "./icon-button/index.js";
+export { GridList } from "./grid-list/index.js";
 export { Input } from "./input/index.js";
 export { Kbd } from "./kbd/index.js";
 export { Label } from "./label/index.js";
+export { ListRow } from "./list-row/index.js";
 export { Pagination } from "./pagination/index.js";
 export { Popover } from "./popover/index.js";
 export { Progress } from "./progress/index.js";
+export { Stepper } from "./stepper/index.js";
 export { RadioGroup, RadioGroupItem } from "./radio-group/index.js";
 export { Select } from "./select/index.js";
 export { ResponsiveContainer } from "./responsive-container/index.js";
 export { Separator } from "./separator/index.js";
 export { Slider } from "./slider/index.js";
+export { Splitter } from "./splitter/index.js";
 export { SidebarShell } from "./sidebar-shell/index.js";
 export { SectionedSidebarNav } from "./sectioned-sidebar-nav/index.js";
 export { Skeleton } from "./skeleton/index.js";
@@ -49,10 +54,13 @@ export { Stat } from "./stat/index.js";
 export { Switch } from "./switch/index.js";
 export { Table } from "./table/index.js";
 export { Tabs } from "./tabs/index.js";
+export { TagsInput } from "./tags-input/index.js";
 export { TabsWithSidebar } from "./tabs-with-sidebar/index.js";
 export { Textarea } from "./textarea/index.js";
+export { TreeView } from "./tree-view/index.js";
 export { createToastController, toast, Toast, Toaster, ToastProvider, ToastViewport, useToast } from "./toast/index.js";
 export { Tooltip } from "./tooltip/index.js";
+export { Toolbar } from "./toolbar/index.js";
 export { Toggle } from "./toggle/index.js";
 export { ToggleGroup } from "./toggle-group/index.js";
 export { Conversation } from "./conversation/index.js";

package/dist/components/list-row/index.d.ts

@@ -0,0 +1,2 @@
+export { ListRow } from "./list-row.js";
+export type { ListRowButtonProps, ListRowDensity, ListRowDescriptionProps, ListRowLinkProps, ListRowProps, ListRowSlotProps, ListRowTitleProps, ListRowVariant } from "./list-row.js";

package/dist/components/list-row/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { ListRow } from "./list-row.js";

package/dist/components/list-row/list-row.d.ts

@@ -0,0 +1,54 @@
+import * as React from "react";
+export type ListRowDensity = "compact" | "default" | "comfortable";
+export type ListRowVariant = "plain" | "surface";
+export interface ListRowProps extends React.HTMLAttributes<HTMLDivElement> {
+    density?: ListRowDensity;
+    disabled?: boolean;
+    selected?: boolean;
+    variant?: ListRowVariant;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface ListRowSlotProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface ListRowTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    ref?: React.Ref<HTMLHeadingElement>;
+}
+export interface ListRowDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    ref?: React.Ref<HTMLParagraphElement>;
+}
+export interface ListRowButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    density?: ListRowDensity;
+    selected?: boolean;
+    variant?: ListRowVariant;
+    ref?: React.Ref<HTMLButtonElement>;
+}
+export interface ListRowLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    density?: ListRowDensity;
+    disabled?: boolean;
+    selected?: boolean;
+    variant?: ListRowVariant;
+    ref?: React.Ref<HTMLAnchorElement>;
+}
+declare function ListRowRoot({ className, density, disabled, ref, selected, variant, ...props }: ListRowProps): React.JSX.Element;
+declare function ListRowLeading({ className, ref, ...props }: ListRowSlotProps): React.JSX.Element;
+declare function ListRowContent({ className, ref, ...props }: ListRowSlotProps): React.JSX.Element;
+declare function ListRowTitle({ className, ref, ...props }: ListRowTitleProps): React.JSX.Element;
+declare function ListRowDescription({ className, ref, ...props }: ListRowDescriptionProps): React.JSX.Element;
+declare function ListRowMeta({ className, ref, ...props }: ListRowSlotProps): React.JSX.Element;
+declare function ListRowTrailing({ className, ref, ...props }: ListRowSlotProps): React.JSX.Element;
+declare function ListRowActions({ className, ref, ...props }: ListRowSlotProps): React.JSX.Element;
+declare function ListRowButton({ className, density, disabled, ref, selected, type, variant, ...props }: ListRowButtonProps): React.JSX.Element;
+declare function ListRowLink({ className, density, disabled, onClick, ref, selected, tabIndex, variant, ...props }: ListRowLinkProps): React.JSX.Element;
+export declare const ListRow: typeof ListRowRoot & {
+    Actions: typeof ListRowActions;
+    Button: typeof ListRowButton;
+    Content: typeof ListRowContent;
+    Description: typeof ListRowDescription;
+    Leading: typeof ListRowLeading;
+    Link: typeof ListRowLink;
+    Meta: typeof ListRowMeta;
+    Title: typeof ListRowTitle;
+    Trailing: typeof ListRowTrailing;
+};
+export {};

package/dist/components/list-row/list-row.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+function rowDataAttributes({ density, disabled, selected, variant }) {
+    return {
+        "data-density": density,
+        "data-disabled": disabled ? "true" : undefined,
+        "data-selected": selected ? "true" : undefined,
+        "data-variant": variant
+    };
+}
+function ListRowRoot({ className, density = "default", disabled, ref, selected, variant = "plain", ...props }) {
+    return (_jsx("div", { ...props, ...rowDataAttributes({ density, disabled, selected, variant }), ref: ref, className: cn("zvk-ui-list-row", className) }));
+}
+function ListRowLeading({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-list-row__leading", className) });
+}
+function ListRowContent({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-list-row__content", className) });
+}
+function ListRowTitle({ className, ref, ...props }) {
+    return _jsx("h3", { ...props, ref: ref, className: cn("zvk-ui-list-row__title", className) });
+}
+function ListRowDescription({ className, ref, ...props }) {
+    return _jsx("p", { ...props, ref: ref, className: cn("zvk-ui-list-row__description", className) });
+}
+function ListRowMeta({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-list-row__meta", className) });
+}
+function ListRowTrailing({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-list-row__trailing", className) });
+}
+function ListRowActions({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-list-row__actions", className) });
+}
+function ListRowButton({ className, density = "default", disabled, ref, selected, type = "button", variant = "plain", ...props }) {
+    return (_jsx("button", { ...props, ...rowDataAttributes({ density, disabled, selected, variant }), ref: ref, className: cn("zvk-ui-list-row", "zvk-ui-list-row--action", className), disabled: disabled, type: type }));
+}
+function ListRowLink({ className, density = "default", disabled, onClick, ref, selected, tabIndex, variant = "plain", ...props }) {
+    return (_jsx("a", { ...props, ...rowDataAttributes({ density, disabled, selected, variant }), ref: ref, "aria-disabled": disabled ? true : props["aria-disabled"], className: cn("zvk-ui-list-row", "zvk-ui-list-row--action", className), onClick: (event) => {
+            if (disabled) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            onClick?.(event);
+        }, tabIndex: disabled ? -1 : tabIndex }));
+}
+export const ListRow = Object.assign(ListRowRoot, {
+    Actions: ListRowActions,
+    Button: ListRowButton,
+    Content: ListRowContent,
+    Description: ListRowDescription,
+    Leading: ListRowLeading,
+    Link: ListRowLink,
+    Meta: ListRowMeta,
+    Title: ListRowTitle,
+    Trailing: ListRowTrailing
+});

package/dist/components/multi-select/index.d.ts

@@ -0,0 +1,2 @@
+export { MultiSelect } from "./multi-select.js";
+export type { MultiSelectOption, MultiSelectProps, MultiSelectSize } from "./multi-select.js";

package/dist/components/multi-select/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { MultiSelect } from "./multi-select.js";

package/dist/components/multi-select/multi-select.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+import type { FloatingPlacement } from "../../internal/floating/index.js";
+import type { PortalProps } from "../../internal/portal/index.js";
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    keywords?: readonly string[];
+}
+export type MultiSelectSize = "sm" | "md" | "lg";
+export interface MultiSelectProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "name" | "onChange" | "size" | "value"> {
+    clearable?: boolean;
+    collisionPadding?: number;
+    container?: PortalProps["container"];
+    defaultValue?: readonly string[];
+    description?: React.ReactNode;
+    emptyState?: React.ReactNode;
+    error?: React.ReactNode;
+    invalid?: boolean;
+    label?: React.ReactNode;
+    matchTriggerWidth?: boolean;
+    maxSelected?: number;
+    name?: string;
+    onValueChange?: (value: string[]) => void;
+    options: readonly MultiSelectOption[];
+    placement?: FloatingPlacement;
+    ref?: React.Ref<HTMLInputElement>;
+    sideOffset?: number;
+    size?: MultiSelectSize;
+    value?: readonly string[];
+}
+export declare function MultiSelect({ "aria-describedby": ariaDescribedBy, className, clearable, collisionPadding, container, defaultValue, description, disabled, emptyState, error, id, invalid, label, matchTriggerWidth, maxSelected, name, onBlur, onFocus, onKeyDown, onValueChange, options, placeholder, placement, ref, required, sideOffset, size, value, ...props }: MultiSelectProps): React.JSX.Element;