@diceui/shared - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

dist/index.d.mts

@@ -15,40 +15,2 @@ import * as React from 'react';
 /**
- * @see https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx
- */
-
-interface SlotProps extends React.HTMLAttributes<HTMLElement> {
-    children?: React.ReactNode;
-}
-declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
-interface SlottableProps {
-    children: React.ReactNode;
-}
-declare const Slottable: React.NamedExoticComponent<SlottableProps>;
-
-type CollectionItem<TItemElement extends HTMLElement, TItemData = {}> = {
-    ref: React.RefObject<TItemElement | null>;
-} & TItemData;
-type CollectionItemMap<TItemElement extends HTMLElement, TItemData = {}> = Map<React.RefObject<TItemElement | null>, CollectionItem<TItemElement, TItemData>>;
-interface CollectionContextValue<TItemElement extends HTMLElement, TItemData = {}> {
-    collectionRef: React.RefObject<TItemElement | null>;
-    itemMap: CollectionItemMap<TItemElement, TItemData>;
-}
-interface CollectionProps extends SlotProps {
-}
-declare function createCollection<TItemElement extends HTMLElement, TItemData = {}>(name: string): readonly [{
-    readonly CollectionProvider: {
-        (props: CollectionContextValue<TItemElement, TItemData> & {
-            children: React.ReactNode;
-        }): React.JSX.Element;
-        displayName: string;
-    };
-    readonly CollectionSlot: React.NamedExoticComponent<CollectionProps & React.RefAttributes<HTMLElement>>;
-    readonly CollectionItemSlot: React.NamedExoticComponent<React.PropsWithoutRef<SlotProps & TItemData & {
-        children: React.ReactNode;
-    }> & React.RefAttributes<TItemElement>>;
-}, <TItemElement_1 extends HTMLElement, TItemData_1 = {}>({ collectionRef, itemMap, }: CollectionContextValue<TItemElement_1, TItemData_1>) => {
-    getItems: () => CollectionItem<TItemElement_1, TItemData_1>[];
-}];
-
-/**
  * @see https://github.com/radix-ui/primitives/blob/main/packages/react/context/src/createContext.tsx
@@ -110,2 +72,15 @@ */
 
+/**
+ * @see https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx
+ */
+
+interface SlotProps extends React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+}
+declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
+interface SlottableProps {
+    children: React.ReactNode;
+}
+declare const Slottable: React.NamedExoticComponent<SlottableProps>;
+
 declare const DATA_ITEM_ATTR = "data-dice-collection-item";
@@ -274,11 +249,21 @@ declare const DATA_DISMISSABLE_LAYER_ATTR = "data-dice-dismissable-layer";
 
-interface UseCollectionParams<TElement extends HTMLElement> {
+type CollectionItem<TElement extends HTMLElement, TData = {}> = {
     ref: React.RefObject<TElement | null>;
-    attr?: string;
+} & TData;
+type CollectionItemMap<TElement extends HTMLElement, TData = {}> = Map<React.RefObject<TElement | null>, CollectionItem<TElement, TData>>;
+type CollectionGroupMap<TElement extends HTMLElement> = Map<string, Set<React.RefObject<TElement | null>>>;
+interface CollectionOptions {
+    /**
+     * Whether to register items into groups.
+     * @default false
+     */
+    grouped?: boolean;
 }
-declare function useCollection<TElement extends HTMLElement>({ ref, attr, }: UseCollectionParams<TElement>): {
-    getItems: () => TElement[];
-    getEnabledItems: () => TElement[];
+declare function useCollection<TElement extends HTMLElement, TData = {}>({ grouped, }?: CollectionOptions): {
+    collectionRef: React.RefObject<TElement | null>;
+    itemMap: CollectionItemMap<TElement, TData>;
+    groupMap: CollectionGroupMap<TElement> | null;
+    getItems: () => CollectionItem<TElement, TData>[];
+    onItemRegister: (item: CollectionItem<TElement, TData>, groupId?: string) => () => void;
 };
-declare function getSortedItems<TElement extends HTMLElement>(items: TElement[], value?: string[]): TElement[];
 
@@ -307,3 +292,3 @@ /**
 }
-interface UseDismissParameters {
+interface UseDismissProps {
     /** Whether the dismissable layer is enabled. */
@@ -317,8 +302,8 @@ enabled: boolean;
     /** References to elements that should not trigger dismissal when clicked. */
-    refs: Array<React.RefObject<Element | null>>;
+    refs: React.RefObject<Element | null>[];
     /**
-     * Event handler called when the escape key is down.
+     * Event handler called when the escape key is pressed.
      * Can be prevented.
      *
-     * @param event - The event that triggered the escape key down.
+     * @param event - The event that triggered the escape key press.
      */
@@ -375,3 +360,3 @@ onEscapeKeyDown?: (event: KeyboardEvent) => void;
 }
-declare function useDismiss(params: UseDismissParameters): {
+declare function useDismiss(params: UseDismissProps): {
     onPointerDownCapture: () => void;
@@ -446,2 +431,25 @@ onPointerUpCapture: () => void;
 
+interface FilterStore {
+    search: string;
+    itemCount: number;
+    items: Map<string, number>;
+    groups?: Map<string, Set<string>>;
+}
+interface UseFilterStoreOptions<TElement extends HTMLElement, TData = {}> {
+    itemMap: Map<React.RefObject<TElement | null>, CollectionItem<TElement, TData>>;
+    groupMap?: Map<string, Set<React.RefObject<TElement | null>>> | null;
+    onFilter?: (options: string[], term: string) => string[];
+    exactMatch?: boolean;
+    manualFiltering?: boolean;
+    onCallback?: (itemCount: number) => void;
+}
+declare function useFilterStore<TElement extends HTMLElement, TData extends {
+    value: string;
+}>({ itemMap, groupMap, onFilter, exactMatch, manualFiltering, onCallback, }: UseFilterStoreOptions<TElement, TData>): {
+    filterStore: FilterStore;
+    onItemsFilter: () => void;
+    getIsItemVisible: (value: string) => boolean;
+    getIsListEmpty: (manual?: boolean) => boolean;
+};
+
 /**
@@ -484,2 +492,19 @@ * A hook to determine if element is inside a form element.
 
+interface UseItemCollectionProps<TElement extends HTMLElement> {
+    ref: React.RefObject<TElement | null>;
+    attr?: string;
+}
+declare function useItemCollection<TElement extends HTMLElement>({ ref, attr, }: UseItemCollectionProps<TElement>): {
+    getItems: () => TElement[];
+    getEnabledItems: () => TElement[];
+};
+
+interface UseLabelProps {
+    defaultValue?: string;
+}
+declare function useLabel<T extends HTMLElement>({ defaultValue }: UseLabelProps): {
+    label: string;
+    onLabelChange: (node: T | null) => void;
+};
+
 /**
@@ -494,6 +519,17 @@ * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-layout-effect/src/useLayoutEffect.tsx
  *
- * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
+ * @see https://react.dev/reference/react/useLayoutEffect
  */
 declare const useLayoutEffect: typeof React.useLayoutEffect;
 
+interface UseListHighlightingOptions<TElement extends HTMLElement, TData = {}> {
+    highlightedItem: CollectionItem<TElement, TData> | null;
+    onHighlightedItemChange: (item: CollectionItem<TElement, TData> | null) => void;
+    getItems: () => CollectionItem<TElement, TData>[];
+    getIsItemSelected: (item: CollectionItem<TElement, TData>) => boolean;
+    loop?: boolean;
+}
+declare function useListHighlighting<TElement extends HTMLElement, TData = {}>({ highlightedItem, onHighlightedItemChange, getItems, getIsItemSelected, loop, }: UseListHighlightingOptions<TElement, TData>): {
+    onHighlightMove: (direction: HighlightingDirection) => void;
+};
+
 declare function useMounted(): boolean;
@@ -573,4 +609,22 @@
 /**
+ * @see https://github.com/emilkowalski/vaul/blob/main/src/browser.ts
+ */
+declare function isFirefox(): boolean | undefined;
+declare function isMobileFirefox(): boolean | undefined;
+declare function isMac(): boolean | undefined;
+declare function isIPhone(): boolean | undefined;
+declare function isSafari(): boolean | undefined;
+declare function isIPad(): boolean | undefined;
+declare function isIOS(): boolean | undefined;
+declare function isPinchZoomActive(win?: Window): boolean;
+declare function getPlatform(): string | undefined;
+declare function testPlatform(re: RegExp): boolean | undefined;
+
+/**
  * @see https://github.com/radix-ui/primitives/blob/main/packages/core/primitive/src/primitive.tsx
  */
+/**
+ * A utility to compose multiple event handlers into a single event handler.
+ * Executes originalEventHandler first, then ourEventHandler unless prevented.
+ */
 declare function composeEventHandlers<E>(originalEventHandler?: (event: E) => void, ourEventHandler?: (event: E) => void, { checkForDefaultPrevented }?: {
@@ -586,12 +640,15 @@ checkForDefaultPrevented?: boolean | undefined;
 /**
- * A utility to compose multiple refs together
- * Accepts callback refs and RefObject(s)
+ * A utility to compose multiple refs together.
+ * Accepts callback refs and RefObject(s).
  */
 declare function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
 /**
- * A custom hook that composes multiple refs
- * Accepts callback refs and RefObject(s)
+ * A custom hook that composes multiple refs.
+ * Accepts callback refs and RefObject(s).
  */
 declare function useComposedRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
 
+declare function getOwnerDocument(node?: Node | null | undefined): Document;
+declare function getOwnerWindow(node?: Node | null | undefined): Window & typeof globalThis;
+
 /**
@@ -604,21 +661,45 @@ * @see https://www.totaltypescript.com/forwardref-with-generic-components
 
+declare function compareNodePosition(a: Node, b: Node): 0 | 1 | -1;
+
 /**
- * @see https://github.com/emilkowalski/vaul/blob/main/src/browser.ts
+ * CSS style object that visually hides content while keeping it accessible to screen readers.
+ * This follows accessibility best practices for visually hidden content.
  */
-declare function isFirefox(): boolean | undefined;
-declare function isMobileFirefox(): boolean | undefined;
-declare function isMac(): boolean | undefined;
-declare function isIPhone(): boolean | undefined;
-declare function isSafari(): boolean | undefined;
-declare function isIPad(): boolean | undefined;
-declare function isIOS(): boolean | undefined;
-declare function isPinchZoomActive(win?: Window): boolean;
-declare function getPlatform(): string | undefined;
-declare function testPlatform(re: RegExp): boolean | undefined;
+declare const visuallyHidden: React.CSSProperties;
+/**
+ * CSS style object for a full-screen overlay backdrop.
+ * Useful for modals, dialogs, and other overlay components.
+ */
+declare const overlay: React.CSSProperties;
+/**
+ * CSS style object for text truncation with ellipsis.
+ * Ensures text fits within its container.
+ */
+declare const truncate: React.CSSProperties;
+/**
+ * CSS style object for a custom focus ring style.
+ * Provides a consistent, accessible focus indicator.
+ */
+declare const focusRing: React.CSSProperties;
+/**
+ * CSS style object to create a scrollable container that hides scrollbars.
+ * Note: For webkit browsers, you'll need to add additional CSS for ::-webkit-scrollbar
+ */
+declare const scrollableHidden: React.CSSProperties;
+/**
+ * CSS style object for absolutely positioning an element to fill its container.
+ * Useful for overlays, backgrounds, and full-size children.
+ */
+declare const fullSize: React.CSSProperties;
+/**
+ * CSS style object for centering content both vertically and horizontally.
+ * Uses flexbox for better browser support.
+ */
+declare const center: React.CSSProperties;
+/**
+ * CSS style object to prevent text selection.
+ * Useful for interactive elements like buttons.
+ */
+declare const noSelect: React.CSSProperties;
 
-declare function getOwnerDocument(node?: Node | null | undefined): Document;
-declare function getOwnerWindow(node?: Node | null | undefined): Window & typeof globalThis;
-
-declare function compareNodePosition(a: Node, b: Node): 0 | 1 | -1;
-
-export { type Align, type AnchorPositionerProps, BubbleInput, type CollectionItem, type CollectionItemMap, type CollectionProps, DATA_DISMISSABLE_LAYER_ATTR, DATA_DISMISSABLE_LAYER_STYLE_ATTR, DATA_ITEM_ATTR, DATA_VALUE_ATTR, type Direction, type FocusOutsideEvent, type ForwardRefComponent, type HighlightingDirection, type Orientation, type PointerDownOutsideEvent, Portal, type PortalProps, Presence, type PresenceProps, Primitive, type PrimitivePropsWithRef, type ProgressState, type Side, Slot, type SlotProps, Slottable, VAR_ANCHOR_HEIGHT, VAR_ANCHOR_WIDTH, VAR_AVAILABLE_HEIGHT, VAR_AVAILABLE_WIDTH, VAR_TRANSFORM_ORIGIN, compareNodePosition, composeEventHandlers, composeRefs, createCollection, createContext, dispatchDiscreteCustomEvent, findNextItem, forwardRef, getOwnerDocument, getOwnerWindow, getPlatform, getProgressState, getSortedItems, isFirefox, isIOS, isIPad, isIPhone, isMac, isMobileFirefox, isPinchZoomActive, isSafari, testPlatform, useAnchor, useAnchorPositioner, useCallbackRef, useCollection, useComposedRefs, useControllableState, useDirection, useDismiss, useEscapeKeydown, useEvent, useEventCallback, useFilter, useFormControl, useFormReset, useId, useIsomorphicLayoutEffect, useLayoutEffect, useMounted, usePrevious, useProgress, useScrollLock, useSize, useStateMachine, useTypeahead, wrapArray };
+export { type Align, type AnchorPositionerProps, BubbleInput, type CollectionGroupMap, type CollectionItem, type CollectionItemMap, DATA_DISMISSABLE_LAYER_ATTR, DATA_DISMISSABLE_LAYER_STYLE_ATTR, DATA_ITEM_ATTR, DATA_VALUE_ATTR, type Direction, type FilterStore, type FocusOutsideEvent, type ForwardRefComponent, type HighlightingDirection, type Orientation, type PointerDownOutsideEvent, Portal, type PortalProps, Presence, type PresenceProps, Primitive, type PrimitivePropsWithRef, type ProgressState, type Side, Slot, type SlotProps, Slottable, VAR_ANCHOR_HEIGHT, VAR_ANCHOR_WIDTH, VAR_AVAILABLE_HEIGHT, VAR_AVAILABLE_WIDTH, VAR_TRANSFORM_ORIGIN, center, compareNodePosition, composeEventHandlers, composeRefs, createContext, dispatchDiscreteCustomEvent, findNextItem, focusRing, forwardRef, fullSize, getOwnerDocument, getOwnerWindow, getPlatform, getProgressState, isFirefox, isIOS, isIPad, isIPhone, isMac, isMobileFirefox, isPinchZoomActive, isSafari, noSelect, overlay, scrollableHidden, testPlatform, truncate, useAnchor, useAnchorPositioner, useCallbackRef, useCollection, useComposedRefs, useControllableState, useDirection, useDismiss, useEscapeKeydown, useEvent, useEventCallback, useFilter, useFilterStore, useFormControl, useFormReset, useId, useIsomorphicLayoutEffect, useItemCollection, useLabel, useLayoutEffect, useListHighlighting, useMounted, usePrevious, useProgress, useScrollLock, useSize, useStateMachine, useTypeahead, visuallyHidden, wrapArray };

dist/index.d.ts

@@ -15,40 +15,2 @@ import * as React from 'react';
 /**
- * @see https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx
- */
-
-interface SlotProps extends React.HTMLAttributes<HTMLElement> {
-    children?: React.ReactNode;
-}
-declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
-interface SlottableProps {
-    children: React.ReactNode;
-}
-declare const Slottable: React.NamedExoticComponent<SlottableProps>;
-
-type CollectionItem<TItemElement extends HTMLElement, TItemData = {}> = {
-    ref: React.RefObject<TItemElement | null>;
-} & TItemData;
-type CollectionItemMap<TItemElement extends HTMLElement, TItemData = {}> = Map<React.RefObject<TItemElement | null>, CollectionItem<TItemElement, TItemData>>;
-interface CollectionContextValue<TItemElement extends HTMLElement, TItemData = {}> {
-    collectionRef: React.RefObject<TItemElement | null>;
-    itemMap: CollectionItemMap<TItemElement, TItemData>;
-}
-interface CollectionProps extends SlotProps {
-}
-declare function createCollection<TItemElement extends HTMLElement, TItemData = {}>(name: string): readonly [{
-    readonly CollectionProvider: {
-        (props: CollectionContextValue<TItemElement, TItemData> & {
-            children: React.ReactNode;
-        }): React.JSX.Element;
-        displayName: string;
-    };
-    readonly CollectionSlot: React.NamedExoticComponent<CollectionProps & React.RefAttributes<HTMLElement>>;
-    readonly CollectionItemSlot: React.NamedExoticComponent<React.PropsWithoutRef<SlotProps & TItemData & {
-        children: React.ReactNode;
-    }> & React.RefAttributes<TItemElement>>;
-}, <TItemElement_1 extends HTMLElement, TItemData_1 = {}>({ collectionRef, itemMap, }: CollectionContextValue<TItemElement_1, TItemData_1>) => {
-    getItems: () => CollectionItem<TItemElement_1, TItemData_1>[];
-}];
-
-/**
  * @see https://github.com/radix-ui/primitives/blob/main/packages/react/context/src/createContext.tsx
@@ -110,2 +72,15 @@ */
 
+/**
+ * @see https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx
+ */
+
+interface SlotProps extends React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+}
+declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
+interface SlottableProps {
+    children: React.ReactNode;
+}
+declare const Slottable: React.NamedExoticComponent<SlottableProps>;
+
 declare const DATA_ITEM_ATTR = "data-dice-collection-item";
@@ -274,11 +249,21 @@ declare const DATA_DISMISSABLE_LAYER_ATTR = "data-dice-dismissable-layer";
 
-interface UseCollectionParams<TElement extends HTMLElement> {
+type CollectionItem<TElement extends HTMLElement, TData = {}> = {
     ref: React.RefObject<TElement | null>;
-    attr?: string;
+} & TData;
+type CollectionItemMap<TElement extends HTMLElement, TData = {}> = Map<React.RefObject<TElement | null>, CollectionItem<TElement, TData>>;
+type CollectionGroupMap<TElement extends HTMLElement> = Map<string, Set<React.RefObject<TElement | null>>>;
+interface CollectionOptions {
+    /**
+     * Whether to register items into groups.
+     * @default false
+     */
+    grouped?: boolean;
 }
-declare function useCollection<TElement extends HTMLElement>({ ref, attr, }: UseCollectionParams<TElement>): {
-    getItems: () => TElement[];
-    getEnabledItems: () => TElement[];
+declare function useCollection<TElement extends HTMLElement, TData = {}>({ grouped, }?: CollectionOptions): {
+    collectionRef: React.RefObject<TElement | null>;
+    itemMap: CollectionItemMap<TElement, TData>;
+    groupMap: CollectionGroupMap<TElement> | null;
+    getItems: () => CollectionItem<TElement, TData>[];
+    onItemRegister: (item: CollectionItem<TElement, TData>, groupId?: string) => () => void;
 };
-declare function getSortedItems<TElement extends HTMLElement>(items: TElement[], value?: string[]): TElement[];
 
@@ -307,3 +292,3 @@ /**
 }
-interface UseDismissParameters {
+interface UseDismissProps {
     /** Whether the dismissable layer is enabled. */
@@ -317,8 +302,8 @@ enabled: boolean;
     /** References to elements that should not trigger dismissal when clicked. */
-    refs: Array<React.RefObject<Element | null>>;
+    refs: React.RefObject<Element | null>[];
     /**
-     * Event handler called when the escape key is down.
+     * Event handler called when the escape key is pressed.
      * Can be prevented.
      *
-     * @param event - The event that triggered the escape key down.
+     * @param event - The event that triggered the escape key press.
      */
@@ -375,3 +360,3 @@ onEscapeKeyDown?: (event: KeyboardEvent) => void;
 }
-declare function useDismiss(params: UseDismissParameters): {
+declare function useDismiss(params: UseDismissProps): {
     onPointerDownCapture: () => void;
@@ -446,2 +431,25 @@ onPointerUpCapture: () => void;
 
+interface FilterStore {
+    search: string;
+    itemCount: number;
+    items: Map<string, number>;
+    groups?: Map<string, Set<string>>;
+}
+interface UseFilterStoreOptions<TElement extends HTMLElement, TData = {}> {
+    itemMap: Map<React.RefObject<TElement | null>, CollectionItem<TElement, TData>>;
+    groupMap?: Map<string, Set<React.RefObject<TElement | null>>> | null;
+    onFilter?: (options: string[], term: string) => string[];
+    exactMatch?: boolean;
+    manualFiltering?: boolean;
+    onCallback?: (itemCount: number) => void;
+}
+declare function useFilterStore<TElement extends HTMLElement, TData extends {
+    value: string;
+}>({ itemMap, groupMap, onFilter, exactMatch, manualFiltering, onCallback, }: UseFilterStoreOptions<TElement, TData>): {
+    filterStore: FilterStore;
+    onItemsFilter: () => void;
+    getIsItemVisible: (value: string) => boolean;
+    getIsListEmpty: (manual?: boolean) => boolean;
+};
+
 /**
@@ -484,2 +492,19 @@ * A hook to determine if element is inside a form element.
 
+interface UseItemCollectionProps<TElement extends HTMLElement> {
+    ref: React.RefObject<TElement | null>;
+    attr?: string;
+}
+declare function useItemCollection<TElement extends HTMLElement>({ ref, attr, }: UseItemCollectionProps<TElement>): {
+    getItems: () => TElement[];
+    getEnabledItems: () => TElement[];
+};
+
+interface UseLabelProps {
+    defaultValue?: string;
+}
+declare function useLabel<T extends HTMLElement>({ defaultValue }: UseLabelProps): {
+    label: string;
+    onLabelChange: (node: T | null) => void;
+};
+
 /**
@@ -494,6 +519,17 @@ * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-layout-effect/src/useLayoutEffect.tsx
  *
- * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
+ * @see https://react.dev/reference/react/useLayoutEffect
  */
 declare const useLayoutEffect: typeof React.useLayoutEffect;
 
+interface UseListHighlightingOptions<TElement extends HTMLElement, TData = {}> {
+    highlightedItem: CollectionItem<TElement, TData> | null;
+    onHighlightedItemChange: (item: CollectionItem<TElement, TData> | null) => void;
+    getItems: () => CollectionItem<TElement, TData>[];
+    getIsItemSelected: (item: CollectionItem<TElement, TData>) => boolean;
+    loop?: boolean;
+}
+declare function useListHighlighting<TElement extends HTMLElement, TData = {}>({ highlightedItem, onHighlightedItemChange, getItems, getIsItemSelected, loop, }: UseListHighlightingOptions<TElement, TData>): {
+    onHighlightMove: (direction: HighlightingDirection) => void;
+};
+
 declare function useMounted(): boolean;
@@ -573,4 +609,22 @@
 /**
+ * @see https://github.com/emilkowalski/vaul/blob/main/src/browser.ts
+ */
+declare function isFirefox(): boolean | undefined;
+declare function isMobileFirefox(): boolean | undefined;
+declare function isMac(): boolean | undefined;
+declare function isIPhone(): boolean | undefined;
+declare function isSafari(): boolean | undefined;
+declare function isIPad(): boolean | undefined;
+declare function isIOS(): boolean | undefined;
+declare function isPinchZoomActive(win?: Window): boolean;
+declare function getPlatform(): string | undefined;
+declare function testPlatform(re: RegExp): boolean | undefined;
+
+/**
  * @see https://github.com/radix-ui/primitives/blob/main/packages/core/primitive/src/primitive.tsx
  */
+/**
+ * A utility to compose multiple event handlers into a single event handler.
+ * Executes originalEventHandler first, then ourEventHandler unless prevented.
+ */
 declare function composeEventHandlers<E>(originalEventHandler?: (event: E) => void, ourEventHandler?: (event: E) => void, { checkForDefaultPrevented }?: {
@@ -586,12 +640,15 @@ checkForDefaultPrevented?: boolean | undefined;
 /**
- * A utility to compose multiple refs together
- * Accepts callback refs and RefObject(s)
+ * A utility to compose multiple refs together.
+ * Accepts callback refs and RefObject(s).
  */
 declare function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
 /**
- * A custom hook that composes multiple refs
- * Accepts callback refs and RefObject(s)
+ * A custom hook that composes multiple refs.
+ * Accepts callback refs and RefObject(s).
  */
 declare function useComposedRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
 
+declare function getOwnerDocument(node?: Node | null | undefined): Document;
+declare function getOwnerWindow(node?: Node | null | undefined): Window & typeof globalThis;
+
 /**
@@ -604,21 +661,45 @@ * @see https://www.totaltypescript.com/forwardref-with-generic-components
 
+declare function compareNodePosition(a: Node, b: Node): 0 | 1 | -1;
+
 /**
- * @see https://github.com/emilkowalski/vaul/blob/main/src/browser.ts
+ * CSS style object that visually hides content while keeping it accessible to screen readers.
+ * This follows accessibility best practices for visually hidden content.
  */
-declare function isFirefox(): boolean | undefined;
-declare function isMobileFirefox(): boolean | undefined;
-declare function isMac(): boolean | undefined;
-declare function isIPhone(): boolean | undefined;
-declare function isSafari(): boolean | undefined;
-declare function isIPad(): boolean | undefined;
-declare function isIOS(): boolean | undefined;
-declare function isPinchZoomActive(win?: Window): boolean;
-declare function getPlatform(): string | undefined;
-declare function testPlatform(re: RegExp): boolean | undefined;
+declare const visuallyHidden: React.CSSProperties;
+/**
+ * CSS style object for a full-screen overlay backdrop.
+ * Useful for modals, dialogs, and other overlay components.
+ */
+declare const overlay: React.CSSProperties;
+/**
+ * CSS style object for text truncation with ellipsis.
+ * Ensures text fits within its container.
+ */
+declare const truncate: React.CSSProperties;
+/**
+ * CSS style object for a custom focus ring style.
+ * Provides a consistent, accessible focus indicator.
+ */
+declare const focusRing: React.CSSProperties;
+/**
+ * CSS style object to create a scrollable container that hides scrollbars.
+ * Note: For webkit browsers, you'll need to add additional CSS for ::-webkit-scrollbar
+ */
+declare const scrollableHidden: React.CSSProperties;
+/**
+ * CSS style object for absolutely positioning an element to fill its container.
+ * Useful for overlays, backgrounds, and full-size children.
+ */
+declare const fullSize: React.CSSProperties;
+/**
+ * CSS style object for centering content both vertically and horizontally.
+ * Uses flexbox for better browser support.
+ */
+declare const center: React.CSSProperties;
+/**
+ * CSS style object to prevent text selection.
+ * Useful for interactive elements like buttons.
+ */
+declare const noSelect: React.CSSProperties;
 
-declare function getOwnerDocument(node?: Node | null | undefined): Document;
-declare function getOwnerWindow(node?: Node | null | undefined): Window & typeof globalThis;
-
-declare function compareNodePosition(a: Node, b: Node): 0 | 1 | -1;
-
-export { type Align, type AnchorPositionerProps, BubbleInput, type CollectionItem, type CollectionItemMap, type CollectionProps, DATA_DISMISSABLE_LAYER_ATTR, DATA_DISMISSABLE_LAYER_STYLE_ATTR, DATA_ITEM_ATTR, DATA_VALUE_ATTR, type Direction, type FocusOutsideEvent, type ForwardRefComponent, type HighlightingDirection, type Orientation, type PointerDownOutsideEvent, Portal, type PortalProps, Presence, type PresenceProps, Primitive, type PrimitivePropsWithRef, type ProgressState, type Side, Slot, type SlotProps, Slottable, VAR_ANCHOR_HEIGHT, VAR_ANCHOR_WIDTH, VAR_AVAILABLE_HEIGHT, VAR_AVAILABLE_WIDTH, VAR_TRANSFORM_ORIGIN, compareNodePosition, composeEventHandlers, composeRefs, createCollection, createContext, dispatchDiscreteCustomEvent, findNextItem, forwardRef, getOwnerDocument, getOwnerWindow, getPlatform, getProgressState, getSortedItems, isFirefox, isIOS, isIPad, isIPhone, isMac, isMobileFirefox, isPinchZoomActive, isSafari, testPlatform, useAnchor, useAnchorPositioner, useCallbackRef, useCollection, useComposedRefs, useControllableState, useDirection, useDismiss, useEscapeKeydown, useEvent, useEventCallback, useFilter, useFormControl, useFormReset, useId, useIsomorphicLayoutEffect, useLayoutEffect, useMounted, usePrevious, useProgress, useScrollLock, useSize, useStateMachine, useTypeahead, wrapArray };
+export { type Align, type AnchorPositionerProps, BubbleInput, type CollectionGroupMap, type CollectionItem, type CollectionItemMap, DATA_DISMISSABLE_LAYER_ATTR, DATA_DISMISSABLE_LAYER_STYLE_ATTR, DATA_ITEM_ATTR, DATA_VALUE_ATTR, type Direction, type FilterStore, type FocusOutsideEvent, type ForwardRefComponent, type HighlightingDirection, type Orientation, type PointerDownOutsideEvent, Portal, type PortalProps, Presence, type PresenceProps, Primitive, type PrimitivePropsWithRef, type ProgressState, type Side, Slot, type SlotProps, Slottable, VAR_ANCHOR_HEIGHT, VAR_ANCHOR_WIDTH, VAR_AVAILABLE_HEIGHT, VAR_AVAILABLE_WIDTH, VAR_TRANSFORM_ORIGIN, center, compareNodePosition, composeEventHandlers, composeRefs, createContext, dispatchDiscreteCustomEvent, findNextItem, focusRing, forwardRef, fullSize, getOwnerDocument, getOwnerWindow, getPlatform, getProgressState, isFirefox, isIOS, isIPad, isIPhone, isMac, isMobileFirefox, isPinchZoomActive, isSafari, noSelect, overlay, scrollableHidden, testPlatform, truncate, useAnchor, useAnchorPositioner, useCallbackRef, useCollection, useComposedRefs, useControllableState, useDirection, useDismiss, useEscapeKeydown, useEvent, useEventCallback, useFilter, useFilterStore, useFormControl, useFormReset, useId, useIsomorphicLayoutEffect, useItemCollection, useLabel, useLayoutEffect, useListHighlighting, useMounted, usePrevious, useProgress, useScrollLock, useSize, useStateMachine, useTypeahead, visuallyHidden, wrapArray };

dist/index.mjs

@@ -1,2 +0,2 @@
-import * as React27 from 'react';
+import * as React31 from 'react';
 import { offset, inline, flip, shift, limitShift, size, arrow, hide, useFloating, autoUpdate } from '@floating-ui/react';
@@ -7,14 +7,14 @@ import * as ReactDOM from 'react-dom';
 function useAnchor() {
-  const anchorRef = React27.useRef(null);
-  const [hasAnchor, setHasAnchor] = React27.useState(false);
-  const onAnchorChange = React27.useCallback((node) => {
+  const anchorRef = React31.useRef(null);
+  const [hasAnchor, setHasAnchor] = React31.useState(false);
+  const onAnchorChange = React31.useCallback((node) => {
     anchorRef.current = node;
   }, []);
-  const onHasAnchorChange = React27.useCallback((value) => {
+  const onHasAnchorChange = React31.useCallback((value) => {
     setHasAnchor(value);
   }, []);
-  const onAnchorAdd = React27.useCallback(() => {
+  const onAnchorAdd = React31.useCallback(() => {
     setHasAnchor(true);
   }, []);
-  const onAnchorRemove = React27.useCallback(() => {
+  const onAnchorRemove = React31.useCallback(() => {
     setHasAnchor(false);
@@ -42,8 +42,8 @@ }, []);
 var VAR_AVAILABLE_HEIGHT = "--dice-available-height";
-var DirectionContext = React27.createContext(void 0);
+var DirectionContext = React31.createContext(void 0);
 function useDirection(dirProp) {
-  const contextDir = React27.useContext(DirectionContext);
+  const contextDir = React31.useContext(DirectionContext);
   return dirProp ?? contextDir ?? "ltr";
 }
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React27.useLayoutEffect : React27.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React31.useLayoutEffect : React31.useEffect;
 
@@ -87,12 +87,12 @@ // src/hooks/use-anchor-positioner.ts
   const direction = useDirection();
-  const [positionerArrow, setPositionerArrow] = React27.useState(null);
-  const rtlAlign = React27.useMemo(() => {
+  const [positionerArrow, setPositionerArrow] = React31.useState(null);
+  const rtlAlign = React31.useMemo(() => {
     if (direction !== "rtl") return align;
     return align === "start" ? "end" : align === "end" ? "start" : "center";
   }, [align, direction]);
-  const placement = React27.useMemo(
+  const placement = React31.useMemo(
     () => `${side}-${rtlAlign}`,
     [side, rtlAlign]
   );
-  const baseMiddleware = React27.useMemo(
+  const baseMiddleware = React31.useMemo(
     () => [
@@ -107,3 +107,3 @@ offset({
   );
-  const collisionMiddleware = React27.useMemo(
+  const collisionMiddleware = React31.useMemo(
     () => avoidCollisions ? [
@@ -123,3 +123,3 @@ flip({
   );
-  const sizeMiddleware = React27.useMemo(
+  const sizeMiddleware = React31.useMemo(
     () => [
@@ -154,3 +154,3 @@ size({
   );
-  const arrowMiddleware = React27.useMemo(
+  const arrowMiddleware = React31.useMemo(
     () => !disableArrow && positionerArrow ? [
@@ -164,3 +164,3 @@ arrow({
   );
-  const middleware = React27.useMemo(
+  const middleware = React31.useMemo(
     () => [
@@ -181,3 +181,3 @@ ...baseMiddleware,
   );
-  const autoUpdateOptions = React27.useMemo(
+  const autoUpdateOptions = React31.useMemo(
     () => ({
@@ -218,3 +218,3 @@ ancestorScroll: trackAnchor,
   }, [open, anchorRef, refs, update]);
-  React27.useEffect(() => {
+  React31.useEffect(() => {
     if (forceMount && open && elements.reference && elements.floating) {
@@ -231,3 +231,3 @@ return autoUpdate(
   const [placementSide = "bottom", placementAlign = "start"] = floatingPlacement.split("-");
-  const transformOrigin = React27.useMemo(() => {
+  const transformOrigin = React31.useMemo(() => {
     const oppositeSide = LONGHAND_SIDES[placementSide];
@@ -237,3 +237,3 @@ const oppositeAlign = placementAlign === "end" ? "start" : placementAlign === "start" ? "end" : "center";
   }, [placementSide, placementAlign]);
-  const getFloatingProps = React27.useCallback(
+  const getFloatingProps = React31.useCallback(
     (floatingProps = {}) => ({
@@ -246,3 +246,3 @@ ...floatingProps,
   );
-  const floatingStyles = React27.useMemo(() => {
+  const floatingStyles = React31.useMemo(() => {
     const validY = isValidNumber(y) ? y : 0;
@@ -259,3 +259,3 @@ const validX = isValidNumber(x) ? x : 0;
   const arrowDisplaced = disableArrow ? false : middlewareData.arrow?.centerOffset !== 0;
-  const arrowStyles = React27.useMemo(() => {
+  const arrowStyles = React31.useMemo(() => {
     if (disableArrow) return {};
@@ -271,3 +271,3 @@ return {
   }, [middlewareData.arrow, placementSide, transformOrigin, disableArrow]);
-  const positionerContext = React27.useMemo(
+  const positionerContext = React31.useMemo(
     () => ({
@@ -312,7 +312,7 @@ refs,
 function useCallbackRef(callback) {
-  const callbackRef = React27.useRef(callback);
-  React27.useEffect(() => {
+  const callbackRef = React31.useRef(callback);
+  React31.useEffect(() => {
     callbackRef.current = callback;
   });
-  return React27.useMemo(
+  return React31.useMemo(
     () => (...args) => callbackRef.current?.(...args),
@@ -337,35 +337,49 @@ []
 function useCollection({
-  ref,
-  attr = DATA_ITEM_ATTR
-}) {
-  const getItems = React27.useCallback(() => {
-    const collectionNode = ref.current;
+  grouped = false
+} = {}) {
+  const collectionRef = React31.useRef(null);
+  const itemMap = React31.useRef(
+    /* @__PURE__ */ new Map()
+  ).current;
+  const groupMap = grouped ? React31.useRef(/* @__PURE__ */ new Map()).current : null;
+  const getItems = React31.useCallback(() => {
+    const collectionNode = collectionRef.current;
     if (!collectionNode) return [];
-    const items = Array.from(
-      collectionNode.querySelectorAll(`[${attr}]`)
-    );
-    return items.sort(compareNodePosition);
-  }, [ref, attr]);
-  const getEnabledItems = React27.useCallback(() => {
-    const items = getItems();
-    return items.filter(
-      (item) => item.getAttribute("aria-disabled") !== "true"
-    );
-  }, [getItems]);
-  return { getItems, getEnabledItems };
+    const items = Array.from(itemMap.values());
+    if (items.length === 0) return [];
+    return items.sort((a, b) => {
+      if (!a?.ref.current || !b?.ref.current) return 0;
+      return compareNodePosition(a.ref.current, b.ref.current);
+    });
+  }, [itemMap]);
+  const onItemRegister = React31.useCallback(
+    (item, groupId) => {
+      itemMap.set(item.ref, item);
+      if (grouped && groupId && groupMap) {
+        if (!groupMap.has(groupId)) {
+          groupMap.set(groupId, /* @__PURE__ */ new Set());
+        }
+        groupMap.get(groupId)?.add(item.ref);
+      }
+      return () => {
+        itemMap.delete(item.ref);
+        if (grouped && groupId && groupMap) {
+          const group = groupMap.get(groupId);
+          group?.delete(item.ref);
+          if (group?.size === 0) {
+            groupMap.delete(groupId);
+          }
+        }
+      };
+    },
+    [itemMap, groupMap, grouped]
+  );
+  return {
+    collectionRef,
+    itemMap,
+    groupMap,
+    getItems,
+    onItemRegister
+  };
 }
-function getSortedItems(items, value) {
-  if (!value?.length) return items;
-  return items.sort((a, b) => {
-    const aValue = a.getAttribute(DATA_VALUE_ATTR);
-    const bValue = b.getAttribute(DATA_VALUE_ATTR);
-    const aIndex = value.indexOf(aValue ?? "");
-    const bIndex = value.indexOf(bValue ?? "");
-    if (aIndex === -1 && bIndex === -1) return compareNodePosition(a, b);
-    if (aIndex === -1) return 1;
-    if (bIndex === -1) return -1;
-    if (aIndex !== bIndex) return aIndex - bIndex;
-    return compareNodePosition(a, b);
-  });
-}
 function useControllableState({
@@ -384,3 +398,3 @@ prop,
   const handleChange = useCallbackRef(onChange);
-  const setValue = React27.useCallback(
+  const setValue = React31.useCallback(
     (nextValue) => {
@@ -403,7 +417,7 @@ if (isControlled) {
 }) {
-  const uncontrolledState = React27.useState(defaultProp);
+  const uncontrolledState = React31.useState(defaultProp);
   const [value] = uncontrolledState;
-  const prevValueRef = React27.useRef(value);
+  const prevValueRef = React31.useRef(value);
   const handleChange = useCallbackRef(onChange);
-  React27.useEffect(() => {
+  React31.useEffect(() => {
     if (prevValueRef.current !== value) {
@@ -431,3 +445,3 @@ handleChange(value);
   const onEscapeKeyDownCallback = useCallbackRef(onEscapeKeyDown);
-  React27.useEffect(() => {
+  React31.useEffect(() => {
     if (!enabled) return;
@@ -463,4 +477,4 @@ function onKeyDown(event) {
   const ownerDocument = getOwnerDocument(refs[0]?.current);
-  const isPointerInsideReactTreeRef = React27.useRef(false);
-  const onClickRef = React27.useRef(() => {
+  const isPointerInsideReactTreeRef = React31.useRef(false);
+  const onClickRef = React31.useRef(() => {
   });
@@ -495,3 +509,3 @@ useEscapeKeydown({
   });
-  React27.useEffect(() => {
+  React31.useEffect(() => {
     if (!enabled) return;
@@ -588,7 +602,7 @@ function onPointerDown(event) {
 function useEventCallback(callback) {
-  const callbackRef = React27.useRef(callback);
-  React27.useLayoutEffect(() => {
+  const callbackRef = React31.useRef(callback);
+  React31.useLayoutEffect(() => {
     callbackRef.current = callback;
   });
-  return React27.useCallback((event, ...args) => {
+  return React31.useCallback((event, ...args) => {
     const fn = callbackRef.current;
@@ -599,7 +613,7 @@ return fn(event, ...args);
 function useEvent(callback) {
-  const callbackRef = React27.useRef(callback);
-  React27.useLayoutEffect(() => {
+  const callbackRef = React31.useRef(callback);
+  React31.useLayoutEffect(() => {
     callbackRef.current = callback;
   });
-  return React27.useCallback((...args) => {
+  return React31.useCallback((...args) => {
     const fn = callbackRef.current;
@@ -683,3 +697,3 @@ return fn(...args);
   }
-  const startsWith = React27.useCallback(
+  const startsWith = React31.useCallback(
     (string, substring) => {
@@ -703,3 +717,3 @@ if (substring.length === 0) {
   );
-  const endsWith = React27.useCallback(
+  const endsWith = React31.useCallback(
     (string, substring) => {
@@ -723,3 +737,3 @@ if (substring.length === 0) {
   );
-  const contains = React27.useCallback(
+  const contains = React31.useCallback(
     (string, substring) => {
@@ -748,3 +762,3 @@ if (substring.length === 0) {
   );
-  const fuzzy = React27.useCallback(
+  const fuzzy = React31.useCallback(
     (string, pattern) => {
@@ -783,3 +797,3 @@ if (pattern.length === 0) return true;
   );
-  return React27.useMemo(
+  return React31.useMemo(
     () => ({
@@ -794,4 +808,116 @@ startsWith,
 }
+function useFilterStore({
+  itemMap,
+  groupMap,
+  onFilter,
+  exactMatch,
+  manualFiltering,
+  onCallback
+}) {
+  const filterStore = React31.useRef({
+    search: "",
+    itemCount: 0,
+    items: /* @__PURE__ */ new Map(),
+    groups: groupMap ? /* @__PURE__ */ new Map() : void 0
+  }).current;
+  const filter = useFilter({ sensitivity: "base", gapMatch: true });
+  const currentFilter = React31.useMemo(
+    () => exactMatch ? filter.contains : filter.fuzzy,
+    [filter.fuzzy, filter.contains, exactMatch]
+  );
+  const getItemScore = React31.useCallback(
+    (value, searchTerm) => {
+      if (!searchTerm) return 1;
+      if (!value) return 0;
+      if (searchTerm === "") return 1;
+      if (value === searchTerm) return 2;
+      if (value.startsWith(searchTerm)) return 1.5;
+      return onFilter ? Number(onFilter([value], searchTerm).length > 0) : Number(currentFilter(value, searchTerm));
+    },
+    [currentFilter, onFilter]
+  );
+  const onItemsFilter = React31.useCallback(() => {
+    if (!filterStore.search || manualFiltering) {
+      filterStore.itemCount = itemMap.size;
+      return;
+    }
+    filterStore.items.clear();
+    if (groupMap && filterStore.groups) {
+      filterStore.groups.clear();
+    }
+    const searchTerm = filterStore.search;
+    let itemCount = 0;
+    let pendingBatch = [];
+    const BATCH_SIZE = 250;
+    function processBatch() {
+      if (!pendingBatch.length) return;
+      const scores = /* @__PURE__ */ new Map();
+      for (const [_, itemData] of pendingBatch) {
+        const score = getItemScore(itemData.value, searchTerm);
+        if (score > 0) {
+          scores.set(itemData.value, score);
+          itemCount++;
+        }
+      }
+      const sortedScores = Array.from(scores.entries()).sort(
+        ([, a], [, b]) => b - a
+      );
+      for (const [id, score] of sortedScores) {
+        filterStore.items.set(id, score);
+      }
+      pendingBatch = [];
+    }
+    for (const [id, value] of itemMap) {
+      pendingBatch.push([id, value]);
+      if (pendingBatch.length >= BATCH_SIZE) {
+        processBatch();
+      }
+    }
+    if (pendingBatch.length > 0) {
+      processBatch();
+    }
+    filterStore.itemCount = itemCount;
+    if (groupMap && filterStore.groups && groupMap.size && itemCount > 0) {
+      const matchingItems = new Set(filterStore.items.keys());
+      for (const [groupId, group] of groupMap) {
+        const hasMatchingItem = Array.from(group).some(
+          (ref) => matchingItems.has(ref.current?.id ?? "")
+        );
+        if (hasMatchingItem) {
+          filterStore.groups.set(groupId, /* @__PURE__ */ new Set());
+        }
+      }
+    }
+    onCallback?.(itemCount);
+  }, [
+    manualFiltering,
+    filterStore,
+    itemMap,
+    groupMap,
+    getItemScore,
+    onCallback
+  ]);
+  const getIsItemVisible = React31.useCallback(
+    (value) => {
+      if (manualFiltering) return true;
+      if (!filterStore.search) return true;
+      return (filterStore.items.get(value) ?? 0) > 0;
+    },
+    [filterStore, manualFiltering]
+  );
+  const getIsListEmpty = React31.useCallback(
+    (manual = false) => {
+      return manual || filterStore.itemCount === 0 && filterStore.search.trim() !== "";
+    },
+    [filterStore]
+  );
+  return {
+    filterStore,
+    onItemsFilter,
+    getIsItemVisible,
+    getIsListEmpty
+  };
+}
 function useFormControl(form) {
-  const [trigger, setTrigger] = React27.useState(null);
+  const [trigger, setTrigger] = React31.useState(null);
   const isFormControl = trigger ? form || !!trigger.closest("form") : true;
@@ -806,3 +932,3 @@ return { isFormControl, trigger, onTriggerChange: setTrigger };
   const onResetCallback = useCallbackRef(onReset);
-  React27.useEffect(() => {
+  React31.useEffect(() => {
     if (!form) return;
@@ -818,10 +944,10 @@ function onFormReset() {
 }
-var useLayoutEffect4 = globalThis?.document ? React27.useLayoutEffect : () => {
+var useLayoutEffect4 = globalThis?.document ? React31.useLayoutEffect : () => {
 };
 
 // src/hooks/use-id.ts
-var useReactId = React27[" useId ".trim().toString()] || (() => void 0);
+var useReactId = React31[" useId ".trim().toString()] || (() => void 0);
 var count = 0;
 function useId(deterministicId) {
-  const [id, setId] = React27.useState(
+  const [id, setId] = React31.useState(
     typeof useReactId === "function" ? useReactId() : void 0
@@ -834,4 +960,87 @@ );
 }
+function useItemCollection({
+  ref,
+  attr = DATA_ITEM_ATTR
+}) {
+  const getItems = React31.useCallback(() => {
+    const collectionNode = ref.current;
+    if (!collectionNode) return [];
+    const items = Array.from(
+      collectionNode.querySelectorAll(`[${attr}]`)
+    );
+    if (items.length === 0) return [];
+    return items.sort(compareNodePosition);
+  }, [ref, attr]);
+  const getEnabledItems = React31.useCallback(() => {
+    const items = getItems();
+    return items.filter(
+      (item) => item.getAttribute("aria-disabled") !== "true"
+    );
+  }, [getItems]);
+  return { getItems, getEnabledItems };
+}
+function useLabel({ defaultValue }) {
+  const [label, setLabel] = React31.useState(defaultValue ?? "");
+  const onLabelChange = React31.useCallback((node) => {
+    setLabel((node?.textContent ?? "").trim());
+  }, []);
+  return { label: defaultValue ?? label, onLabelChange };
+}
+function useListHighlighting({
+  highlightedItem,
+  onHighlightedItemChange,
+  getItems,
+  getIsItemSelected,
+  loop = false
+}) {
+  const onHighlightMove = React31.useCallback(
+    (direction) => {
+      const items = getItems();
+      if (items.length === 0) return;
+      const currentIndex = items.findIndex(
+        (item) => item.ref.current === highlightedItem?.ref.current
+      );
+      let nextIndex;
+      const lastIndex = items.length - 1;
+      switch (direction) {
+        case "next": {
+          nextIndex = currentIndex + 1;
+          nextIndex = nextIndex > lastIndex ? loop ? 0 : lastIndex : nextIndex;
+          break;
+        }
+        case "prev": {
+          nextIndex = currentIndex - 1;
+          nextIndex = nextIndex < 0 ? loop ? lastIndex : 0 : nextIndex;
+          break;
+        }
+        case "first":
+          nextIndex = 0;
+          break;
+        case "last":
+          nextIndex = lastIndex;
+          break;
+        case "selected": {
+          nextIndex = items.findIndex(getIsItemSelected);
+          nextIndex = nextIndex === -1 ? 0 : nextIndex;
+          break;
+        }
+      }
+      const nextItem = items[nextIndex];
+      if (nextItem?.ref.current) {
+        nextItem.ref.current.scrollIntoView({ block: "nearest" });
+        onHighlightedItemChange(nextItem);
+      }
+    },
+    [
+      getItems,
+      getIsItemSelected,
+      highlightedItem,
+      onHighlightedItemChange,
+      loop
+    ]
+  );
+  return { onHighlightMove };
+}
 function useMounted() {
-  const [mounted, setMounted] = React27.useState(false);
+  const [mounted, setMounted] = React31.useState(false);
   useLayoutEffect4(() => {
@@ -843,4 +1052,4 @@ setMounted(true);
 function usePrevious(value) {
-  const ref = React27.useRef({ value, previous: value });
-  return React27.useMemo(() => {
+  const ref = React31.useRef({ value, previous: value });
+  return React31.useMemo(() => {
     if (ref.current.value !== value) {
@@ -869,15 +1078,15 @@ ref.current.previous = ref.current.value;
 }) {
-  const max = React27.useMemo(
+  const max = React31.useMemo(
     () => isValidMaxNumber(maxProp) ? maxProp : 100,
     [maxProp]
   );
-  const value = React27.useMemo(
+  const value = React31.useMemo(
     () => isValidValueNumber(valueProp, max) ? valueProp : null,
     [valueProp, max]
   );
-  const state = React27.useMemo(
+  const state = React31.useMemo(
     () => getProgressState(value, max),
     [value, max]
   );
-  const progressProps = React27.useMemo(
+  const progressProps = React31.useMemo(
     () => ({
@@ -992,6 +1201,6 @@ role: "progressbar",
 } = {}) {
-  const scrollPositionRef = React27.useRef({ top: 0, left: 0 });
-  const resizeRef = React27.useRef(-1);
-  const scrollableRef = React27.useRef(null);
-  const cleanupRef = React27.useRef(null);
+  const scrollPositionRef = React31.useRef({ top: 0, left: 0 });
+  const resizeRef = React31.useRef(-1);
+  const scrollableRef = React31.useRef(null);
+  const cleanupRef = React31.useRef(null);
   useIsomorphicLayoutEffect(() => {
@@ -1190,3 +1399,3 @@ if (!enabled) return;
 function useSize(element) {
-  const [size2, setSize] = React27.useState(void 0);
+  const [size2, setSize] = React31.useState(void 0);
   useLayoutEffect4(() => {
@@ -1224,4 +1433,4 @@ if (element) {
 function useStateMachine(config) {
-  const [state, setState] = React27.useState(config.initial);
-  const send = React27.useCallback(
+  const [state, setState] = React31.useState(config.initial);
+  const send = React31.useCallback(
     (event) => {
@@ -1262,5 +1471,5 @@ setState((currentState) => {
   const onSearchChangeCallback = useCallbackRef(onSearchChange);
-  const searchRef = React27.useRef("");
-  const timerRef = React27.useRef(0);
-  const onTypeaheadSearch = React27.useCallback(
+  const searchRef = React31.useRef("");
+  const timerRef = React31.useRef(0);
+  const onTypeaheadSearch = React31.useCallback(
     (key) => {
@@ -1287,7 +1496,7 @@ if (!enabled) return;
   );
-  const onResetTypeahead = React27.useCallback(() => {
+  const onResetTypeahead = React31.useCallback(() => {
     searchRef.current = "";
     window.clearTimeout(timerRef.current);
   }, []);
-  React27.useEffect(() => {
+  React31.useEffect(() => {
     return () => window.clearTimeout(timerRef.current);
@@ -1314,7 +1523,7 @@ }, []);
   } = props;
-  const ref = React27.useRef(null);
+  const ref = React31.useRef(null);
   const prevValue = usePrevious(type === "hidden" ? value : checked);
   const controlSize = useSize(control);
   const isCheckInput = type === "checkbox" || type === "radio" || type === "switch";
-  React27.useEffect(() => {
+  React31.useEffect(() => {
     const input = ref.current;
@@ -1344,3 +1553,3 @@ if (!input) return;
   });
-  return /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React31.createElement(
     "input",
@@ -1365,33 +1574,16 @@ {
 }
-function setRef(ref, value) {
-  if (typeof ref === "function") {
-    ref(value);
-  } else if (ref !== null && ref !== void 0) {
-    ref.current = value;
-  }
-}
-function composeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      setRef(ref, node);
-    }
-  };
-}
-function useComposedRefs(...refs) {
-  return React27.useCallback(composeRefs(...refs), refs);
-}
 function createContext3(rootComponentName, defaultValue) {
-  const Context = React27.createContext(defaultValue);
+  const Context = React31.createContext(defaultValue);
   Context.displayName = rootComponentName;
   function Provider(props) {
     const { children, ...contextValue } = props;
-    const value = React27.useMemo(
+    const value = React31.useMemo(
       () => contextValue,
       Object.values(contextValue)
     );
-    return /* @__PURE__ */ React27.createElement(Context.Provider, { value }, children);
+    return /* @__PURE__ */ React31.createElement(Context.Provider, { value }, children);
   }
   Provider.displayName = `${rootComponentName}Provider`;
   function useContext3(consumerName, required) {
-    const context = React27.useContext(Context);
+    const context = React31.useContext(Context);
     if (context) return context;
@@ -1408,4 +1600,21 @@ if (defaultValue !== void 0) return defaultValue;
 }
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      setRef(ref, node);
+    }
+  };
+}
+function useComposedRefs(...refs) {
+  return React31.useCallback(composeRefs(...refs), refs);
+}
 function getElementRef(element) {
-  if (!React27.isValidElement(element)) return void 0;
+  if (!React31.isValidElement(element)) return void 0;
   const propDescriptor = Object.getOwnPropertyDescriptor(element.props, "ref");
@@ -1424,3 +1633,3 @@ const elementDescriptor = Object.getOwnPropertyDescriptor(element, "ref");
 var isSlottable = function isSlottable2(child) {
-  return React27.isValidElement(child) && child.type === Slottable;
+  return React31.isValidElement(child) && child.type === Slottable;
 };
@@ -1452,7 +1661,7 @@ function mergeProps(slotProps, childProps) {
 }
-var SlotClone = React27.forwardRef(
+var SlotClone = React31.forwardRef(
   (props, forwardedRef) => {
     const { children, ...slotProps } = props;
-    if (!React27.isValidElement(children)) {
-      return React27.Children.count(children) > 1 ? React27.Children.only(null) : null;
+    if (!React31.isValidElement(children)) {
+      return React31.Children.count(children) > 1 ? React31.Children.only(null) : null;
     }
@@ -1465,3 +1674,3 @@ const childrenRef = getElementRef(children);
     if (typeof children.type === "string") {
-      return React27.cloneElement(children, {
+      return React31.cloneElement(children, {
         ...mergedProps,
@@ -1471,3 +1680,3 @@ ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef
     }
-    return React27.cloneElement(children, {
+    return React31.cloneElement(children, {
       ...mergedProps,
@@ -1479,10 +1688,10 @@ ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef
 SlotClone.displayName = "SlotClone";
-var Slot = React27.forwardRef((props, forwardedRef) => {
+var Slot = React31.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
-  const childrenArray = React27.Children.toArray(children);
+  const childrenArray = React31.Children.toArray(children);
   const slottable = childrenArray.find(isSlottable);
   if (!slottable) {
-    return /* @__PURE__ */ React27.createElement(SlotClone, { ...slotProps, ref: forwardedRef }, children);
+    return /* @__PURE__ */ React31.createElement(SlotClone, { ...slotProps, ref: forwardedRef }, children);
   }
-  if (!React27.isValidElement(slottable)) {
+  if (!React31.isValidElement(slottable)) {
     return null;
@@ -1493,95 +1702,23 @@ }
     if (child === slottable) {
-      if (React27.Children.count(newElement) > 1) {
-        return React27.Children.only(null);
+      if (React31.Children.count(newElement) > 1) {
+        return React31.Children.only(null);
       }
-      return React27.isValidElement(newElement) ? newElement.props.children : null;
+      return React31.isValidElement(newElement) ? newElement.props.children : null;
     }
     return child;
   });
-  return /* @__PURE__ */ React27.createElement(SlotClone, { ...slotProps, ref: forwardedRef }, React27.isValidElement(newElement) ? React27.cloneElement(newElement, void 0, newChildren) : null);
+  return /* @__PURE__ */ React31.createElement(SlotClone, { ...slotProps, ref: forwardedRef }, React31.isValidElement(newElement) ? React31.cloneElement(newElement, void 0, newChildren) : null);
 });
 Slot.displayName = "Slot";
-var Slottable = React27.memo(function Slottable2({ children }) {
-  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, children);
+var Slottable = React31.memo(function Slottable2({ children }) {
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, children);
 });
 Slottable.displayName = "Slottable";
 
-// src/components/collection.tsx
-function createCollection(name) {
-  const PROVIDER_NAME = `${name}CollectionProvider`;
-  const COLLECTION_SLOT_NAME = `${name}CollectionSlot`;
-  const ITEM_SLOT_NAME = `${name}CollectionItemSlot`;
-  const [CollectionProvider, useCollectionContext] = createContext3(
-    PROVIDER_NAME
-  );
-  const CollectionSlot = React27.memo(
-    React27.forwardRef((props, forwardedRef) => {
-      const context = useCollectionContext(COLLECTION_SLOT_NAME);
-      const composedRefs = React27.useMemo(
-        () => composeRefs(forwardedRef, context.collectionRef),
-        [forwardedRef, context.collectionRef]
-      );
-      return /* @__PURE__ */ React27.createElement(Slot, { ref: composedRefs, ...props });
-    })
-  );
-  CollectionSlot.displayName = COLLECTION_SLOT_NAME;
-  const CollectionItemSlot = React27.memo(
-    React27.forwardRef(
-      (props, forwardedRef) => {
-        const { children, ...itemProps } = props;
-        const context = useCollectionContext(ITEM_SLOT_NAME);
-        const itemRef = React27.useRef(null);
-        const itemPropsRef = React27.useRef(itemProps);
-        itemPropsRef.current = itemProps;
-        const composedRef = composeRefs(forwardedRef, itemRef);
-        React27.useEffect(() => {
-          const node = itemRef.current;
-          if (!node) return;
-          const item = {
-            ref: itemRef,
-            ...itemPropsRef.current
-          };
-          context.itemMap.set(itemRef, item);
-          return () => void context.itemMap.delete(itemRef);
-        }, [context.itemMap]);
-        return /* @__PURE__ */ React27.createElement(Slot, { ...{ [DATA_ITEM_ATTR]: "" }, ref: composedRef }, children);
-      }
-    )
-  );
-  CollectionItemSlot.displayName = ITEM_SLOT_NAME;
-  function useCollection2({
-    collectionRef,
-    itemMap
-  }) {
-    const getItems = React27.useCallback(() => {
-      const collectionNode = collectionRef.current;
-      if (!collectionNode) return [];
-      try {
-        const items = Array.from(itemMap.values());
-        const fallbackDiv = globalThis.document?.createElement("div");
-        return items.sort((a, b) => {
-          const aNode = a?.ref.current ?? fallbackDiv;
-          const bNode = b?.ref.current ?? fallbackDiv;
-          return compareNodePosition(aNode, bNode);
-        });
-      } catch (_err) {
-        return [];
-      }
-    }, [collectionRef, itemMap]);
-    return React27.useMemo(() => ({ getItems }), [getItems]);
-  }
-  return [
-    {
-      CollectionProvider,
-      CollectionSlot,
-      CollectionItemSlot
-    },
-    useCollection2
-  ];
-}
+// src/components/primitive.tsx
 function createPrimitive(element) {
-  const Primitive2 = React27.forwardRef((props, forwardedRef) => {
+  const Primitive2 = React31.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     if (asChild) {
-      return React27.createElement(Slot, {
+      return React31.createElement(Slot, {
         ...primitiveProps,
@@ -1591,3 +1728,3 @@ ref: forwardedRef
     }
-    return React27.createElement(element, {
+    return React31.createElement(element, {
       ...primitiveProps,
@@ -1625,11 +1762,11 @@ ref: forwardedRef
 // src/components/portal.tsx
-var Portal = React27.forwardRef(
+var Portal = React31.forwardRef(
   (props, forwardedRef) => {
-    const { container, ...portalProps } = props;
+    const { container: containerProp, ...portalProps } = props;
     const mounted = useMounted();
-    const dynamicContainer = container ?? (mounted ? globalThis.document?.body : null);
-    if (!dynamicContainer) return null;
+    const container = containerProp ?? (mounted ? globalThis.document?.body : null);
+    if (!container) return null;
     return ReactDOM.createPortal(
-      /* @__PURE__ */ React27.createElement(Primitive.div, { ...portalProps, ref: forwardedRef }),
-      dynamicContainer
+      /* @__PURE__ */ React31.createElement(Primitive.div, { ...portalProps, ref: forwardedRef }),
+      container
     );
@@ -1649,6 +1786,59 @@ }
 }
-function forwardRef6(render) {
-  return React27.forwardRef(render);
+function forwardRef5(render) {
+  return React31.forwardRef(render);
 }
 
+// src/lib/styles.ts
+var visuallyHidden = {
+  border: 0,
+  clip: "rect(0 0 0 0)",
+  clipPath: "inset(50%)",
+  height: "1px",
+  margin: "-1px",
+  overflow: "hidden",
+  padding: 0,
+  position: "absolute",
+  whiteSpace: "nowrap",
+  width: "1px"
+};
+var overlay = {
+  position: "fixed",
+  inset: 0,
+  backgroundColor: "rgba(0, 0, 0, 0.4)",
+  backdropFilter: "blur(2px)",
+  zIndex: 50
+};
+var truncate = {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+var focusRing = {
+  outline: "none",
+  boxShadow: "0 0 0 2px rgba(66, 153, 225, 0.6)",
+  borderRadius: "0.25rem"
+};
+var scrollableHidden = {
+  overflow: "auto",
+  scrollbarWidth: "none",
+  msOverflowStyle: "none"
+};
+var fullSize = {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+};
+var center = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+var noSelect = {
+  userSelect: "none",
+  WebkitUserSelect: "none",
+  msUserSelect: "none"
+};
+
 // src/components/presence.tsx
@@ -1658,15 +1848,15 @@ var Presence = (props) => {
   const presence = usePresence(present);
-  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React27.Children.only(children);
+  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React31.Children.only(children);
   const ref = useComposedRefs(presence.ref, getElementRef(child));
   const forceMount = typeof children === "function";
-  return forceMount || presence.isPresent ? React27.cloneElement(child, { ref }) : null;
+  return forceMount || presence.isPresent ? React31.cloneElement(child, { ref }) : null;
 };
 Presence.displayName = "Presence";
 function usePresence(present) {
-  const [node, setNode] = React27.useState();
-  const stylesRef = React27.useRef(
+  const [node, setNode] = React31.useState();
+  const stylesRef = React31.useRef(
     {}
   );
-  const prevPresentRef = React27.useRef(present);
-  const prevAnimationNameRef = React27.useRef("none");
+  const prevPresentRef = React31.useRef(present);
+  const prevAnimationNameRef = React31.useRef("none");
   const initialState = present ? "mounted" : "unmounted";
@@ -1689,3 +1879,3 @@ const [state, send] = useStateMachine({
   });
-  React27.useEffect(() => {
+  React31.useEffect(() => {
     const currentAnimationName = getAnimationName(stylesRef.current);
@@ -1756,3 +1946,3 @@ prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
     isPresent: ["mounted", "unmountSuspended"].includes(state),
-    ref: React27.useCallback((node2) => {
+    ref: React31.useCallback((node2) => {
       if (node2) stylesRef.current = getComputedStyle(node2);
@@ -1767,2 +1957,2 @@ setNode(node2);
 
-export { BubbleInput, DATA_DISMISSABLE_LAYER_ATTR, DATA_DISMISSABLE_LAYER_STYLE_ATTR, DATA_ITEM_ATTR, DATA_VALUE_ATTR, Portal, Presence, Primitive, Slot, Slottable, VAR_ANCHOR_HEIGHT, VAR_ANCHOR_WIDTH, VAR_AVAILABLE_HEIGHT, VAR_AVAILABLE_WIDTH, VAR_TRANSFORM_ORIGIN, compareNodePosition, composeEventHandlers, composeRefs, createCollection, createContext3 as createContext, dispatchDiscreteCustomEvent, findNextItem, forwardRef6 as forwardRef, getOwnerDocument, getOwnerWindow, getPlatform, getProgressState, getSortedItems, isFirefox, isIOS, isIPad, isIPhone, isMac, isMobileFirefox, isPinchZoomActive, isSafari, testPlatform, useAnchor, useAnchorPositioner, useCallbackRef, useCollection, useComposedRefs, useControllableState, useDirection, useDismiss, useEscapeKeydown, useEvent, useEventCallback, useFilter, useFormControl, useFormReset, useId, useIsomorphicLayoutEffect, useLayoutEffect4 as useLayoutEffect, useMounted, usePrevious, useProgress, useScrollLock, useSize, useStateMachine, useTypeahead, wrapArray };
+export { BubbleInput, DATA_DISMISSABLE_LAYER_ATTR, DATA_DISMISSABLE_LAYER_STYLE_ATTR, DATA_ITEM_ATTR, DATA_VALUE_ATTR, Portal, Presence, Primitive, Slot, Slottable, VAR_ANCHOR_HEIGHT, VAR_ANCHOR_WIDTH, VAR_AVAILABLE_HEIGHT, VAR_AVAILABLE_WIDTH, VAR_TRANSFORM_ORIGIN, center, compareNodePosition, composeEventHandlers, composeRefs, createContext3 as createContext, dispatchDiscreteCustomEvent, findNextItem, focusRing, forwardRef5 as forwardRef, fullSize, getOwnerDocument, getOwnerWindow, getPlatform, getProgressState, isFirefox, isIOS, isIPad, isIPhone, isMac, isMobileFirefox, isPinchZoomActive, isSafari, noSelect, overlay, scrollableHidden, testPlatform, truncate, useAnchor, useAnchorPositioner, useCallbackRef, useCollection, useComposedRefs, useControllableState, useDirection, useDismiss, useEscapeKeydown, useEvent, useEventCallback, useFilter, useFilterStore, useFormControl, useFormReset, useId, useIsomorphicLayoutEffect, useItemCollection, useLabel, useLayoutEffect4 as useLayoutEffect, useListHighlighting, useMounted, usePrevious, useProgress, useScrollLock, useSize, useStateMachine, useTypeahead, visuallyHidden, wrapArray };

package.json

 {
   "name": "@diceui/shared",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "publishConfig": {
@@ -5,0 +5,0 @@ "access": "public"

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

182738

9.05%

Lines of code

4512

11.55%

No dependency changes