twenty-ui 2.47.0 → 2.49.0

package/dist/components/layout/OverflowingList/internal/useOverflowingListFocus.d.ts

@@ -0,0 +1,30 @@
+import { FocusEvent, RefObject } from 'react';
+import { OverflowingListProps } from '../types/OverflowingListProps';
+type UseOverflowingListFocusOptions = {
+    containerRef: RefObject<HTMLDivElement | null>;
+    itemsRef: RefObject<HTMLDivElement | null>;
+    triggerRef: RefObject<HTMLElement | null>;
+    popup: HTMLDivElement | null;
+    itemCount: number;
+    canExpand: boolean;
+    isPopupOpen: boolean;
+    isOpen: boolean;
+    isHovered: boolean;
+    showOverflowCount: OverflowingListProps['showOverflowCount'];
+    onFocusCapture: OverflowingListProps['onFocusCapture'];
+    onBlurCapture: OverflowingListProps['onBlurCapture'];
+};
+export declare const useOverflowingListFocus: ({ containerRef, itemsRef, triggerRef, popup, itemCount, canExpand, isPopupOpen, isOpen, isHovered, showOverflowCount, onFocusCapture, onBlurCapture, }: UseOverflowingListFocusOptions) => {
+    hasFocus: boolean;
+    isCountVisible: boolean;
+    restoreItemFocus: ({ index, element, isInPopup, }: {
+        index: number;
+        element: HTMLElement;
+        isInPopup: boolean;
+    }) => void;
+    schedulePopupFocusRestoration: () => false;
+    resetFocusWhenFocusedTriggerUnmounts: (element: HTMLElement | null) => (() => void) | undefined;
+    handleFocusCapture: (event: FocusEvent<HTMLDivElement>) => void;
+    handleBlurCapture: (event: FocusEvent<HTMLDivElement>) => void;
+};
+export {};

package/dist/components/layout/OverflowingList/internal/useOverflowingListLayout.d.ts

@@ -1,12 +1,12 @@
-export declare const useOverflowingListLayout: ({ itemCount, inlineItemCount, reserveCountSpace, isMeasurementEnabled, }: {
+import { OverflowingListLayout } from './types/OverflowingListLayout';
+export declare const useOverflowingListLayout: ({ itemCount, inlineItemCount, }: {
     itemCount: number;
     inlineItemCount: number;
-    reserveCountSpace: boolean;
-    isMeasurementEnabled: boolean;
 }) => {
-    containerRef: import('react').RefObject<HTMLDivElement | null>;
-    itemsRef: import('react').RefObject<HTMLDivElement | null>;
-    triggerRef: import('react').RefObject<HTMLButtonElement | null>;
     visibleItemCount: number;
     hasOverflow: boolean;
+    containerRef: import('react').RefObject<HTMLDivElement | null>;
+    itemsRef: import('react').RefObject<HTMLDivElement | null>;
+    triggerRef: import('react').RefObject<HTMLElement | null>;
+    updateLayout: (nextLayout: OverflowingListLayout) => void;
 };

package/dist/components/layout/OverflowingList/types/OverflowingListProps.d.ts

@@ -1,7 +1,12 @@
-import { ComponentPropsWithRef, ReactElement } from 'react';
-export type OverflowingListProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
+import { ComponentPropsWithRef, ReactElement, Ref } from 'react';
+import { Popover } from '../../../../primitives/surfaces/Popover/Popover';
+export type OverflowingListProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & Pick<ComponentPropsWithRef<typeof Popover.Root>, 'open' | 'defaultOpen' | 'onOpenChange' | 'actionsRef'> & {
     children: ReactElement[];
     showOverflowCount?: boolean;
     maxInlineCount?: number;
     overflowLabel?: string;
+    triggerProps?: Omit<ComponentPropsWithRef<typeof Popover.Trigger>, 'handle' | 'payload' | 'ref'> & {
+        ref?: Ref<HTMLElement>;
+    };
+    popupProps?: Omit<ComponentPropsWithRef<typeof Popover.Popup>, 'children'>;
 };

package/dist/components/layout.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../layout-wuIu4rJ3.cjs");exports.AnimatedIconCrossfade=e.AnimatedIconCrossfade;exports.OverflowingList=e.OverflowingList;exports.Section=e.Section;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../layout-CthYckvl.cjs");exports.AnimatedIconCrossfade=e.AnimatedIconCrossfade;exports.OverflowingList=e.OverflowingList;exports.Section=e.Section;

package/dist/components/layout.mjs

@@ -1,4 +1,4 @@
-import { n as r, r as s, t } from "../layout-BKHabkTu.js";
+import { n as r, r as s, t } from "../layout-DQcjBu08.js";
 export {
   s as AnimatedIconCrossfade,
   r as OverflowingList,

package/dist/components/navigation/Dropdown/Dropdown.d.ts

@@ -3,9 +3,10 @@ import { DropdownRootProps } from './types/DropdownRootProps';
 export declare const Dropdown: {
     Root: (props: DropdownRootProps) => ReactElement;
     Trigger: ({ onKeyDown, onClick, ref, ...props }: import('..').DropdownTriggerProps) => import("react").JSX.Element;
-    Content: ({ side, align, sideOffset, alignOffset, anchor, collisionPadding, container, keepMounted, width, className, style, children, initialFocus, onKeyDown, onInput, onClick, onMouseDown, onPointerDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }: import('..').DropdownContentProps) => import("react").JSX.Element;
-    ActionItem: ({ color, startIcon, endIcon, description, descriptionPlacement, shortcut, shortcutJoinLabel, hasSubmenu, actions, actionsVisibility, children, render, disabled, nativeButton, closeOnClick, onClick, onFocus, page, id, ...props }: import('..').DropdownActionItemProps) => import("react").JSX.Element;
-    OptionItem: ({ selected, indicator, onSelect, closeOnSelect, color, startIcon, endIcon, description, descriptionPlacement, shortcut, shortcutJoinLabel, hasSubmenu, actions, actionsVisibility, children, render, disabled, nativeButton, onClick, onFocus, id, ...props }: import('..').DropdownOptionItemProps) => import("react").JSX.Element;
+    Content: ({ side, align, sideOffset, alignOffset, anchor, collisionPadding, container, keepMounted, width, className, style, children, initialFocus, onKeyDown, onFocus, onInput, onClick, onMouseDown, onPointerDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }: import('..').DropdownContentProps) => import("react").JSX.Element;
+    ActionItem: ({ color, startIcon, endIcon, description, descriptionPlacement, shortcut, shortcutJoinLabel, hasSubmenu, actions, actionsVisibility, children, render, disabled, nativeButton, closeOnClick, onClick, page, id, ...props }: import('..').DropdownActionItemProps) => import("react").JSX.Element;
+    OptionItem: ({ value, selected: standaloneSelected, indicator, onSelect, closeOnSelect, color, startIcon, endIcon, description, descriptionPlacement, shortcut, shortcutJoinLabel, hasSubmenu, actions, actionsVisibility, children, render, disabled, nativeButton, onClick, id, ...props }: import('..').DropdownOptionItemProps) => import("react").JSX.Element;
+    SelectionGroup: (props: import('..').DropdownSelectionGroupProps) => import("react").JSX.Element;
     Search: ({ onValueChange, className, ...props }: import('..').DropdownSearchProps) => import("react").JSX.Element;
     Header: ({ render, ref, className, ...props }: import('..').DropdownHeaderProps) => ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
     Title: ({ className, render, ref, ...props }: import('..').DropdownTitleProps) => import("react").JSX.Element;
@@ -13,7 +14,7 @@ export declare const Dropdown: {
     Page: ({ id, type, children }: import('..').DropdownPageProps) => import("react").JSX.Element | null;
     Back: ({ children, className, onClick, ...props }: Omit<import('..').DropdownActionItemProps, "page" | "closeOnClick" | "actions" | "actionsVisibility">) => import("react").JSX.Element;
     Submenu: ({ type, ...props }: import('..').DropdownSubmenuProps) => import("react").JSX.Element;
-    SubmenuTrigger: ({ color, startIcon, endIcon, description, descriptionPlacement, shortcut, shortcutJoinLabel, hasSubmenu, children, render, disabled, nativeButton, openOnHover, onKeyDown, onFocus, id, ref, ...props }: import('..').DropdownSubmenuTriggerProps) => import("react").JSX.Element;
+    SubmenuTrigger: ({ color, startIcon, endIcon, description, descriptionPlacement, shortcut, shortcutJoinLabel, hasSubmenu, children, render, disabled, nativeButton, openOnHover, onKeyDown, id, ref, ...props }: import('..').DropdownSubmenuTriggerProps) => import("react").JSX.Element;
     Section: ({ label, scrollable, columns, style, className, children, ...props }: import('..').DropdownSectionProps) => import("react").JSX.Element;
     Separator: ({ className, ...props }: import('react').ComponentPropsWithRef<"div">) => import("react").JSX.Element;
     Loading: ({ className, ...props }: import('react').ComponentPropsWithRef<"div">) => import("react").JSX.Element;

package/dist/components/navigation/Dropdown/__stories__/DropdownIconGridExample.d.ts

@@ -0,0 +1,3 @@
+export declare const DropdownIconGridExample: ({ onSelect, }: {
+    onSelect?: (index: number) => void;
+}) => import("react").JSX.Element;

package/dist/components/navigation/Dropdown/__stories__/DropdownSelectionGroupsExample.d.ts

@@ -0,0 +1 @@
+export declare const DropdownSelectionGroupsExample: () => import("react").JSX.Element;

package/dist/components/navigation/Dropdown/internal/DropdownActionItem.d.ts

@@ -1,2 +1,2 @@
 import { DropdownActionItemProps } from '../types/DropdownActionItemProps';
-export declare const DropdownActionItem: ({ color, startIcon, endIcon, description, descriptionPlacement, shortcut, shortcutJoinLabel, hasSubmenu, actions, actionsVisibility, children, render, disabled, nativeButton, closeOnClick, onClick, onFocus, page, id, ...props }: DropdownActionItemProps) => import("react").JSX.Element;
+export declare const DropdownActionItem: ({ color, startIcon, endIcon, description, descriptionPlacement, shortcut, shortcutJoinLabel, hasSubmenu, actions, actionsVisibility, children, render, disabled, nativeButton, closeOnClick, onClick, page, id, ...props }: DropdownActionItemProps) => import("react").JSX.Element;

package/dist/components/navigation/Dropdown/internal/DropdownContent.d.ts

@@ -1,2 +1,2 @@
 import { DropdownContentProps } from '../types/DropdownContentProps';
-export declare const DropdownContent: ({ side, align, sideOffset, alignOffset, anchor, collisionPadding, container, keepMounted, width, className, style, children, initialFocus, onKeyDown, onInput, onClick, onMouseDown, onPointerDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }: DropdownContentProps) => import("react").JSX.Element;
+export declare const DropdownContent: ({ side, align, sideOffset, alignOffset, anchor, collisionPadding, container, keepMounted, width, className, style, children, initialFocus, onKeyDown, onFocus, onInput, onClick, onMouseDown, onPointerDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }: DropdownContentProps) => import("react").JSX.Element;

package/dist/components/navigation/Dropdown/internal/DropdownContextValue.d.ts

@@ -1,17 +1,19 @@
+import { Dispatch, SetStateAction } from 'react';
 import { DropdownType } from '../types/DropdownType';
 import { DropdownFocusTarget } from './DropdownFocusTarget';
 import { DropdownPageFocusRequest } from './DropdownPageFocusRequest';
-export type DropdownContextValue = {
+import { DropdownRowFocus } from './DropdownRowFocus';
+import { useDropdownSelections } from './useDropdownSelections';
+export type DropdownContextValue = ReturnType<typeof useDropdownSelections> & {
     type: DropdownType;
     rootType: DropdownType;
     open: boolean;
     multiple: boolean;
     isSubmenu: boolean;
     parentType?: DropdownType;
-    activeItemId?: string;
-    parentActiveItemId?: string;
-    setActiveItemId: (id: string) => void;
-    setParentActiveItemId?: (id: string) => void;
+    rowFocus: DropdownRowFocus;
+    parentRowFocus?: DropdownRowFocus;
+    setRowIds: Dispatch<SetStateAction<string[] | undefined>>;
     pageId?: string;
     pageFocusRequest?: DropdownPageFocusRequest;
     setPageFocusRequest: (request: DropdownPageFocusRequest | undefined) => void;
@@ -21,7 +23,11 @@ export type DropdownContextValue = {
     focusOnOpen: boolean;
     setFocusOnOpen: (focusOnOpen: boolean) => void;
     setOpen: (open: boolean) => void;
-    closeTree: () => void;
+    closeTree: (tabOutEvent?: Event) => void;
+    tabForwardOutOfTree: (tab: {
+        ownerDocument: Document;
+        tabOutEvent: Event;
+    }) => void;
     goToPage: (page: {
         id: string;
         trigger?: DropdownFocusTarget;

package/dist/components/navigation/Dropdown/internal/DropdownOptionItem.d.ts

@@ -1,2 +1,2 @@
 import { DropdownOptionItemProps } from '../types/DropdownOptionItemProps';
-export declare const DropdownOptionItem: ({ selected, indicator, onSelect, closeOnSelect, color, startIcon, endIcon, description, descriptionPlacement, shortcut, shortcutJoinLabel, hasSubmenu, actions, actionsVisibility, children, render, disabled, nativeButton, onClick, onFocus, id, ...props }: DropdownOptionItemProps) => import("react").JSX.Element;
+export declare const DropdownOptionItem: ({ value, selected: standaloneSelected, indicator, onSelect, closeOnSelect, color, startIcon, endIcon, description, descriptionPlacement, shortcut, shortcutJoinLabel, hasSubmenu, actions, actionsVisibility, children, render, disabled, nativeButton, onClick, id, ...props }: DropdownOptionItemProps) => import("react").JSX.Element;

package/dist/components/navigation/Dropdown/internal/DropdownOptionItemOwner.d.ts

@@ -0,0 +1,7 @@
+import { useRender } from '@base-ui/react/use-render';
+import { DropdownOptionItemState } from '../types/DropdownOptionItemState';
+type DropdownOptionItemOwnerProps = useRender.ComponentProps<'button', DropdownOptionItemState> & {
+    state: DropdownOptionItemState;
+};
+export declare const DropdownOptionItemOwner: ({ render, ref, state, ...props }: DropdownOptionItemOwnerProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export {};

package/dist/components/navigation/Dropdown/internal/DropdownRowFocus.d.ts

@@ -0,0 +1,5 @@
+export type DropdownRowFocus = {
+    rowIds?: string[];
+    tabStopRowId?: string;
+    focusRow: (id: string) => void;
+};

package/dist/components/navigation/Dropdown/internal/DropdownRowsEffect.d.ts

@@ -0,0 +1,5 @@
+type DropdownRowsEffectProps = {
+    content: HTMLDivElement | null;
+};
+export declare const DropdownRowsEffect: ({ content }: DropdownRowsEffectProps) => null;
+export {};

package/dist/components/navigation/Dropdown/internal/DropdownSelectionContext.d.ts

@@ -0,0 +1,2 @@
+import { DropdownSelectionContextValue } from './DropdownSelectionContextValue';
+export declare const DropdownSelectionContext: import('react').Context<DropdownSelectionContextValue | undefined>;

package/dist/components/navigation/Dropdown/internal/DropdownSelectionContextValue.d.ts

@@ -0,0 +1,9 @@
+import { DropdownSelectionGroupChangeEventDetails } from '../types/DropdownSelectionGroupChangeEventDetails';
+import { DropdownSelectionGroupState } from '../types/DropdownSelectionGroupState';
+export type DropdownSelectionContextValue = DropdownSelectionGroupState & {
+    closeOnSelect: boolean;
+    select: (selection: {
+        value: string;
+        eventDetails: DropdownSelectionGroupChangeEventDetails;
+    }) => void;
+};

package/dist/components/navigation/Dropdown/internal/DropdownSelectionGroup.d.ts

@@ -0,0 +1,2 @@
+import { DropdownSelectionGroupProps } from '../types/DropdownSelectionGroupProps';
+export declare const DropdownSelectionGroup: (props: DropdownSelectionGroupProps) => import("react").JSX.Element;

package/dist/components/navigation/Dropdown/internal/DropdownSelectionGroupEffect.d.ts

@@ -0,0 +1,11 @@
+import { DropdownSelectionGroupState } from '../types/DropdownSelectionGroupState';
+type DropdownSelectionGroupEffectProps = {
+    id: string;
+    initialState: DropdownSelectionGroupState;
+    initializeSelection: (selection: {
+        id: string;
+        state: DropdownSelectionGroupState;
+    }) => void;
+};
+export declare const DropdownSelectionGroupEffect: ({ id, initialState, initializeSelection, }: DropdownSelectionGroupEffectProps) => null;
+export {};

package/dist/components/navigation/Dropdown/internal/DropdownSubmenuTrigger.d.ts

@@ -1,2 +1,2 @@
 import { DropdownSubmenuTriggerProps } from '../types/DropdownSubmenuTriggerProps';
-export declare const DropdownSubmenuTrigger: ({ color, startIcon, endIcon, description, descriptionPlacement, shortcut, shortcutJoinLabel, hasSubmenu, children, render, disabled, nativeButton, openOnHover, onKeyDown, onFocus, id, ref, ...props }: DropdownSubmenuTriggerProps) => import("react").JSX.Element;
+export declare const DropdownSubmenuTrigger: ({ color, startIcon, endIcon, description, descriptionPlacement, shortcut, shortcutJoinLabel, hasSubmenu, children, render, disabled, nativeButton, openOnHover, onKeyDown, id, ref, ...props }: DropdownSubmenuTriggerProps) => import("react").JSX.Element;

package/dist/components/navigation/Dropdown/internal/createDropdownSelectionEventDetails.d.ts

@@ -0,0 +1,5 @@
+import { DropdownSelectionGroupChangeEventDetails } from '../types/DropdownSelectionGroupChangeEventDetails';
+export declare const createDropdownSelectionEventDetails: ({ event, trigger, }: {
+    event: DropdownSelectionGroupChangeEventDetails["event"];
+    trigger: Element;
+}) => DropdownSelectionGroupChangeEventDetails;

package/dist/components/navigation/Dropdown/internal/dropdownItemActivation.d.ts

@@ -0,0 +1,11 @@
+import { DropdownSelectionGroupChangeEventDetails } from '../types/DropdownSelectionGroupChangeEventDetails';
+export declare const dropdownItemActivation: {
+    activate: ({ item, event }: {
+        item: HTMLElement;
+        event: KeyboardEvent;
+    }) => void;
+    getEvent: ({ item, event, }: {
+        item: HTMLElement;
+        event: DropdownSelectionGroupChangeEventDetails["event"];
+    }) => KeyboardEvent | MouseEvent;
+};

package/dist/components/navigation/Dropdown/internal/getDropdownItemExplicitId.d.ts

@@ -0,0 +1,5 @@
+import { DropdownOptionItemProps } from '../types/DropdownOptionItemProps';
+export declare const getDropdownItemExplicitId: ({ id, render, }: {
+    id?: string;
+    render?: DropdownOptionItemProps["render"];
+}) => string | undefined;

package/dist/components/navigation/Dropdown/internal/getDropdownOptionItemRole.d.ts

@@ -0,0 +1,9 @@
+import { DropdownOptionItemProps } from '../types/DropdownOptionItemProps';
+import { DropdownType } from '../types/DropdownType';
+export declare const getDropdownOptionItemRole: ({ type, hasSelectionState, hasSelectionOwner, multiple, role, }: {
+    type: DropdownType;
+    hasSelectionState: boolean;
+    hasSelectionOwner: boolean;
+    multiple: boolean;
+    role: DropdownOptionItemProps["role"];
+}) => DropdownOptionItemProps["role"];

package/dist/components/navigation/Dropdown/internal/getDropdownRows.d.ts

@@ -0,0 +1 @@
+export declare const getDropdownRows: (content: HTMLElement) => HTMLElement[];

package/dist/components/navigation/Dropdown/internal/getDropdownSearch.d.ts

@@ -0,0 +1 @@
+export declare const getDropdownSearch: (content: HTMLElement) => HTMLInputElement | null;

package/dist/components/navigation/Dropdown/internal/getDropdownSelectionGroupState.d.ts

@@ -0,0 +1,6 @@
+import { DropdownSelectionGroupProps } from '../types/DropdownSelectionGroupProps';
+import { DropdownSelectionGroupState } from '../types/DropdownSelectionGroupState';
+export declare const getDropdownSelectionGroupState: ({ props, storedState, }: {
+    props: DropdownSelectionGroupProps;
+    storedState?: DropdownSelectionGroupState;
+}) => DropdownSelectionGroupState;

package/dist/components/navigation/Dropdown/internal/getDropdownTabStopRowId.d.ts

@@ -0,0 +1,4 @@
+export declare const getDropdownTabStopRowId: ({ rowIds, focusedRowId, }: {
+    rowIds?: string[];
+    focusedRowId?: string;
+}) => string | undefined;

package/dist/components/navigation/Dropdown/internal/getTrailingFocusGuard.d.ts

@@ -0,0 +1 @@
+export declare const getTrailingFocusGuard: (element: Element | null) => HTMLElement | undefined;

package/dist/components/navigation/Dropdown/internal/isDropdownDismissPrevented.d.ts

@@ -1,5 +1,6 @@
 import { DropdownDismissEvent } from '../types/DropdownDismissEvent';
-export declare const isDropdownDismissPrevented: ({ onDismiss, event, }: {
+export declare const isDropdownDismissPrevented: ({ onDismiss, event, target, }: {
     onDismiss: ((dismissEvent: DropdownDismissEvent) => void) | undefined;
     event: Event;
+    target?: Element | null;
 }) => boolean;

package/dist/components/navigation/Dropdown/internal/isDropdownOptionItemSelected.d.ts

@@ -0,0 +1,6 @@
+import { DropdownSelectionContextValue } from './DropdownSelectionContextValue';
+export declare const isDropdownOptionItemSelected: ({ selection, value, standaloneSelected, }: {
+    selection: DropdownSelectionContextValue | undefined;
+    value: string | undefined;
+    standaloneSelected: boolean | undefined;
+}) => boolean | undefined;

package/dist/components/navigation/Dropdown/internal/isDropdownRow.d.ts

@@ -0,0 +1,4 @@
+export declare const isDropdownRow: ({ content, item, }: {
+    content: HTMLElement;
+    item: HTMLElement;
+}) => boolean;

package/dist/components/navigation/Dropdown/internal/isEnabledDropdownItem.d.ts

@@ -0,0 +1,4 @@
+export declare const isEnabledDropdownItem: ({ content, item, }: {
+    content: HTMLElement;
+    item: HTMLElement;
+}) => boolean;

package/dist/components/navigation/Dropdown/internal/useDropdownItemFocus.d.ts

@@ -4,5 +4,4 @@ export declare const useDropdownItemFocus: ({ id, disabled, isSubmenuTrigger, }:
     isSubmenuTrigger?: boolean;
 }) => {
     tabIndex: number;
-    activate: () => void | undefined;
 };

package/dist/components/navigation/Dropdown/internal/useDropdownKeyboardNavigation.d.ts

@@ -1,7 +1,2 @@
 import { KeyboardEvent } from 'react';
-import { DropdownType } from '../types/DropdownType';
-export declare const useDropdownKeyboardNavigation: ({ type, isSubmenu, setOpen, }: {
-    type: DropdownType;
-    isSubmenu: boolean;
-    setOpen: (open: boolean) => void;
-}) => (event: KeyboardEvent<HTMLDivElement>) => void;
+export declare const useDropdownKeyboardNavigation: () => (event: KeyboardEvent<HTMLDivElement>) => void;

package/dist/components/navigation/Dropdown/internal/useDropdownSelections.d.ts

@@ -0,0 +1,12 @@
+import { DropdownSelectionGroupState } from '../types/DropdownSelectionGroupState';
+export declare const useDropdownSelections: () => {
+    selections: Map<string, DropdownSelectionGroupState>;
+    initializeSelection: ({ id, state }: {
+        id: string;
+        state: DropdownSelectionGroupState;
+    }) => void;
+    updateSelection: ({ id, state }: {
+        id: string;
+        state: DropdownSelectionGroupState;
+    }) => void;
+};

package/dist/components/navigation/Dropdown/types/DropdownOptionItemProps.d.ts

@@ -1,7 +1,12 @@
 import { DropdownActionItemProps } from './DropdownActionItemProps';
-export type DropdownOptionItemProps = Omit<DropdownActionItemProps, 'page' | 'closeOnClick' | 'onSelect'> & {
+import { useRender } from '@base-ui/react/use-render';
+import { DropdownOptionItemState } from './DropdownOptionItemState';
+import { DropdownOptionItemSelectEventDetails } from './DropdownOptionItemSelectEventDetails';
+export type DropdownOptionItemProps = Omit<DropdownActionItemProps, 'page' | 'closeOnClick' | 'onSelect' | 'render' | 'value'> & {
+    value?: string;
+    render?: useRender.ComponentProps<'button', DropdownOptionItemState>['render'];
     selected?: boolean;
     indicator?: 'check' | 'checkbox' | 'none';
-    onSelect?: () => void;
+    onSelect?: (eventDetails: DropdownOptionItemSelectEventDetails) => void;
     closeOnSelect?: boolean;
 };

package/dist/components/navigation/Dropdown/types/DropdownOptionItemSelectEventDetails.d.ts

@@ -0,0 +1,2 @@
+import { DropdownSelectionGroupChangeEventDetails } from './DropdownSelectionGroupChangeEventDetails';
+export type DropdownOptionItemSelectEventDetails = DropdownSelectionGroupChangeEventDetails;

package/dist/components/navigation/Dropdown/types/DropdownOptionItemState.d.ts

@@ -0,0 +1,5 @@
+export type DropdownOptionItemState = {
+    selected: boolean;
+    multiple: boolean;
+    disabled: boolean;
+};

package/dist/components/navigation/Dropdown/types/DropdownSelectionGroupChangeEventDetails.d.ts

@@ -0,0 +1,7 @@
+export type DropdownSelectionGroupChangeEventDetails = {
+    reason: 'item-press';
+    event: MouseEvent | KeyboardEvent | PointerEvent;
+    trigger: Element | undefined;
+    cancel: () => void;
+    isCanceled: boolean;
+};

package/dist/components/navigation/Dropdown/types/DropdownSelectionGroupProps.d.ts

@@ -0,0 +1,21 @@
+import { useRender } from '@base-ui/react/use-render';
+import { DropdownSelectionGroupChangeEventDetails } from './DropdownSelectionGroupChangeEventDetails';
+import { DropdownSelectionGroupState } from './DropdownSelectionGroupState';
+type DropdownSelectionGroupValueProps<TValue> = {
+    defaultValue?: TValue;
+    onValueChange?: (value: TValue, eventDetails: DropdownSelectionGroupChangeEventDetails) => void;
+} & ({
+    id?: string;
+    value: TValue;
+} | {
+    id: string;
+    value?: TValue;
+});
+export type DropdownSelectionGroupProps = Omit<useRender.ComponentProps<'div', DropdownSelectionGroupState>, 'id' | 'defaultValue' | 'onChange'> & {
+    closeOnSelect?: boolean;
+} & (({
+    multiple?: false;
+} & DropdownSelectionGroupValueProps<string | null>) | ({
+    multiple: true;
+} & DropdownSelectionGroupValueProps<string[]>));
+export {};

package/dist/components/navigation/Dropdown/types/DropdownSelectionGroupState.d.ts

@@ -0,0 +1,7 @@
+export type DropdownSelectionGroupState = {
+    multiple: false;
+    value: string | null;
+} | {
+    multiple: true;
+    value: string[];
+};

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

@@ -6,10 +6,15 @@ export type { DropdownContentProps } from './Dropdown/types/DropdownContentProps
 export type { DropdownDismissEvent } from './Dropdown/types/DropdownDismissEvent';
 export type { DropdownHeaderProps } from './Dropdown/types/DropdownHeaderProps';
 export type { DropdownOptionItemProps } from './Dropdown/types/DropdownOptionItemProps';
+export type { DropdownOptionItemSelectEventDetails } from './Dropdown/types/DropdownOptionItemSelectEventDetails';
+export type { DropdownOptionItemState } from './Dropdown/types/DropdownOptionItemState';
 export type { DropdownPageProps } from './Dropdown/types/DropdownPageProps';
 export type { DropdownRootProps } from './Dropdown/types/DropdownRootProps';
 export type { DropdownSearchProps } from './Dropdown/types/DropdownSearchProps';
 export type { DropdownSectionProps } from './Dropdown/types/DropdownSectionProps';
+export type { DropdownSelectionGroupChangeEventDetails } from './Dropdown/types/DropdownSelectionGroupChangeEventDetails';
+export type { DropdownSelectionGroupProps } from './Dropdown/types/DropdownSelectionGroupProps';
+export type { DropdownSelectionGroupState } from './Dropdown/types/DropdownSelectionGroupState';
 export type { DropdownSubmenuProps } from './Dropdown/types/DropdownSubmenuProps';
 export type { DropdownSubmenuTriggerProps } from './Dropdown/types/DropdownSubmenuTriggerProps';
 export type { DropdownTitleProps } from './Dropdown/types/DropdownTitleProps';

package/dist/components/navigation.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../Dropdown-BBUGkQQV.cjs"),e=require("../navigation-B1hPNYv2.cjs");exports.DEFAULT_COLOR_LABELS=e.DEFAULT_COLOR_LABELS;exports.Dropdown=t.Dropdown;exports.ListItemButton=e.ListItemButton;exports.MenuItem=e.MenuItem;exports.MenuItemAvatar=e.MenuItemAvatar;exports.MenuItemDraggable=e.MenuItemDraggable;exports.MenuItemSuggestion=e.MenuItemSuggestion;exports.MenuPicker=e.MenuPicker;exports.TabButton=e.TabButton;exports.useDropdownPage=e.useDropdownPage;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../Dropdown-Bl4OXCf9.cjs"),e=require("../navigation-CflGBYv-.cjs");exports.DEFAULT_COLOR_LABELS=e.DEFAULT_COLOR_LABELS;exports.Dropdown=t.Dropdown;exports.ListItemButton=e.ListItemButton;exports.MenuItem=e.MenuItem;exports.MenuItemAvatar=e.MenuItemAvatar;exports.MenuItemDraggable=e.MenuItemDraggable;exports.MenuItemSuggestion=e.MenuItemSuggestion;exports.MenuPicker=e.MenuPicker;exports.TabButton=e.TabButton;exports.useDropdownPage=e.useDropdownPage;

package/dist/components/navigation.mjs

@@ -1,5 +1,5 @@
-import { t } from "../Dropdown-CScN_olN.js";
-import { a as s, c as o, i as n, l as r, n as m, o as u, r as i, s as g, t as p } from "../navigation-itBinyPi.js";
+import { t } from "../Dropdown-1OAJvS1f.js";
+import { a as s, c as o, i as n, l as r, n as m, o as u, r as i, s as g, t as p } from "../navigation-B6nka3bW.js";
 export {
   g as DEFAULT_COLOR_LABELS,
   t as Dropdown,

package/dist/components/settings.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../settings-BiSAY2oN.cjs");exports.SettingsRow=e.SettingsRow;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../settings-CPXhrmbK.cjs");exports.SettingsRow=e.SettingsRow;

package/dist/components/settings.mjs

@@ -1,4 +1,4 @@
-import { t as o } from "../settings-CC-2gcAx.js";
+import { t as o } from "../settings-BgVuLpg9.js";
 export {
   o as SettingsRow
 };

package/dist/components.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("./data-display-DjhAHvj1.cjs"),i=require("./TintedIconTile-CU2hCerq.cjs"),n=require("./feedback-B5x8tmnG.cjs"),r=require("./Dropdown-BBUGkQQV.cjs"),e=require("./input-BEKjAOjS.cjs"),u=require("./layout-wuIu4rJ3.cjs"),t=require("./navigation-B1hPNYv2.cjs"),a=require("./settings-BiSAY2oN.cjs");exports.AnimatedIconCrossfade=u.AnimatedIconCrossfade;exports.AvatarGroup=o.AvatarGroup;exports.Callout=n.Callout;exports.CommandBlock=o.CommandBlock;exports.CountrySelect=e.CountrySelect;exports.CurrencyPicker=e.CurrencyPicker;exports.DEFAULT_COLOR_LABELS=t.DEFAULT_COLOR_LABELS;exports.Dropdown=r.Dropdown;exports.IconButton=r.IconButton;exports.ImageInput=e.ImageInput;exports.InlineBanner=n.InlineBanner;exports.JsonTree=o.JsonTree;exports.LightButton=e.LightButton;exports.LightIconButton=r.LightIconButton;exports.ListItemButton=t.ListItemButton;exports.MainButton=e.MainButton;exports.MenuItem=t.MenuItem;exports.MenuItemAvatar=t.MenuItemAvatar;exports.MenuItemDraggable=t.MenuItemDraggable;exports.MenuItemSuggestion=t.MenuItemSuggestion;exports.MenuPicker=t.MenuPicker;exports.MetricRow=o.MetricRow;exports.NumberStepper=e.NumberStepper;exports.OverflowingList=u.OverflowingList;exports.PhoneCountryPicker=e.PhoneCountryPicker;exports.SearchInput=e.SearchInput;exports.Section=u.Section;exports.SegmentedControl=e.SegmentedControl;exports.SettingsRow=a.SettingsRow;exports.StackIcon=o.StackIcon;exports.TabButton=t.TabButton;exports.TintedIconTile=i.TintedIconTile;exports.Toast=n.Toast;exports.ToastProvider=n.ToastProvider;exports.Toaster=n.Toaster;exports.getIconTileColorShades=i.getIconTileColorShades;exports.useDropdownPage=t.useDropdownPage;exports.useToast=n.useToast;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("./data-display-XV3ht1rC.cjs"),i=require("./TintedIconTile-DO1XJXCQ.cjs"),n=require("./feedback-Cs-38OH4.cjs"),e=require("./input-ChlFcqIS.cjs"),r=require("./Dropdown-Bl4OXCf9.cjs"),u=require("./layout-CthYckvl.cjs"),t=require("./navigation-CflGBYv-.cjs"),a=require("./settings-CPXhrmbK.cjs");exports.AnimatedIconCrossfade=u.AnimatedIconCrossfade;exports.AvatarGroup=o.AvatarGroup;exports.Callout=n.Callout;exports.CommandBlock=o.CommandBlock;exports.CountrySelect=e.CountrySelect;exports.CurrencyPicker=e.CurrencyPicker;exports.DEFAULT_COLOR_LABELS=t.DEFAULT_COLOR_LABELS;exports.Dropdown=r.Dropdown;exports.IconButton=r.IconButton;exports.ImageInput=e.ImageInput;exports.InlineBanner=n.InlineBanner;exports.JsonTree=o.JsonTree;exports.LightButton=e.LightButton;exports.LightIconButton=r.LightIconButton;exports.ListItemButton=t.ListItemButton;exports.MainButton=e.MainButton;exports.MenuItem=t.MenuItem;exports.MenuItemAvatar=t.MenuItemAvatar;exports.MenuItemDraggable=t.MenuItemDraggable;exports.MenuItemSuggestion=t.MenuItemSuggestion;exports.MenuPicker=t.MenuPicker;exports.MetricRow=o.MetricRow;exports.NumberStepper=e.NumberStepper;exports.OverflowingList=u.OverflowingList;exports.PhoneCountryPicker=e.PhoneCountryPicker;exports.SearchInput=e.SearchInput;exports.Section=u.Section;exports.SegmentedControl=e.SegmentedControl;exports.SettingsRow=a.SettingsRow;exports.StackIcon=o.StackIcon;exports.TabButton=t.TabButton;exports.TintedIconTile=i.TintedIconTile;exports.Toast=n.Toast;exports.ToastProvider=n.ToastProvider;exports.Toaster=n.Toaster;exports.getIconTileColorShades=i.getIconTileColorShades;exports.useDropdownPage=t.useDropdownPage;exports.useToast=n.useToast;

package/dist/components.mjs

@@ -1,42 +1,42 @@
-import { a as t, i as o, n as s, r, t as e } from "./data-display-DU3G8ZyI.js";
-import { n as i, t as m } from "./TintedIconTile-4BGa8g8n.js";
-import { a as c, i as p, n as I, o as l, r as g, t as f } from "./feedback-DhilJ_fX.js";
-import { n as T, r as d, t as B } from "./Dropdown-CScN_olN.js";
-import { a as L, c as M, i as P, l as h, n as k, o as w, r as A, s as v, t as D } from "./input-BUgnp6eA.js";
-import { n as y, r as O, t as R } from "./layout-BKHabkTu.js";
-import { a as _, c as x, i as F, l as G, n as J, o as N, r as U, s as j, t as q } from "./navigation-itBinyPi.js";
-import { t as H } from "./settings-CC-2gcAx.js";
+import { a as t, i as o, n as s, r as e, t as r } from "./data-display-BtXCGOGw.js";
+import { n as i, t as m } from "./TintedIconTile-B1XDtGrF.js";
+import { a as c, i as p, n as I, o as l, r as g, t as f } from "./feedback-DTyVVcTb.js";
+import { a as T, c as d, i as B, l as C, n as L, o as M, r as P, s as h, t as k } from "./input-BrjD91wv.js";
+import { a as A, i as v, t as D } from "./Dropdown-1OAJvS1f.js";
+import { n as y, r as O, t as R } from "./layout-DQcjBu08.js";
+import { a as _, c as x, i as F, l as G, n as J, o as N, r as U, s as j, t as q } from "./navigation-B6nka3bW.js";
+import { t as H } from "./settings-BgVuLpg9.js";
 export {
   O as AnimatedIconCrossfade,
   t as AvatarGroup,
   l as Callout,
   o as CommandBlock,
-  h as CountrySelect,
-  M as CurrencyPicker,
+  C as CountrySelect,
+  d as CurrencyPicker,
   j as DEFAULT_COLOR_LABELS,
-  B as Dropdown,
-  d as IconButton,
-  v as ImageInput,
+  D as Dropdown,
+  A as IconButton,
+  h as ImageInput,
   c as InlineBanner,
-  r as JsonTree,
-  w as LightButton,
-  T as LightIconButton,
+  e as JsonTree,
+  M as LightButton,
+  v as LightIconButton,
   x as ListItemButton,
-  L as MainButton,
+  T as MainButton,
   N as MenuItem,
   _ as MenuItemAvatar,
   F as MenuItemDraggable,
   U as MenuItemSuggestion,
   J as MenuPicker,
   s as MetricRow,
-  P as NumberStepper,
+  B as NumberStepper,
   y as OverflowingList,
-  A as PhoneCountryPicker,
-  k as SearchInput,
+  P as PhoneCountryPicker,
+  L as SearchInput,
   R as Section,
-  D as SegmentedControl,
+  k as SegmentedControl,
   H as SettingsRow,
-  e as StackIcon,
+  r as StackIcon,
   q as TabButton,
   m as TintedIconTile,
   g as Toast,

package/dist/data-display-BSKGlijb.cjs

@@ -0,0 +1 @@
+const o=require("./theme-1XkFz8Qu.cjs"),_=require("./isDefined-DS2Q42p5.cjs"),A=require("./doNotTranslate-CHE7WmRS.cjs"),k=require("./utilities-xZh8D2gd.cjs"),z=require("./Loader-Bb72CUQ9.cjs"),y=require("./OverflowingTextWithTooltip-Z2daM0_x.cjs");let p=require("@base-ui/react/use-render"),f=require("@sniptt/guards"),g=require("clsx"),e=require("react/jsx-runtime");var L={xl:{fontSize:"16px",width:"40px"},lg:{fontSize:"13px",width:"24px"},md:{fontSize:"12px",width:"16px"},sm:{fontSize:"10px",width:"14px"},xs:{fontSize:"8px",width:"12px"}},F="_badge_1q6rc_1",Y={badge:F},I=({size:t="sm",color:r="tertiary",shape:s="pill",className:l,render:a,ref:n,...i})=>(0,p.useRender)({defaultTagName:"span",render:a,ref:n,props:{...i,className:(0,g.clsx)(Y.badge,l),"data-badge-size":t,"data-badge-color":r,"data-badge-shape":s}}),M="_chip_j2xcu_1",W="_label_j2xcu_26",Z="_endElementDivider_j2xcu_75",v={chip:M,label:W,endElementDivider:Z},$={height:"var(--t-spacing-4)"},U=({children:t,size:r="sm",variant:s="ghost",color:l="primary",shape:a="square",weight:n="regular",onClick:i,clickable:d=_.isDefined(i),startElement:c,endElement:u,endElementDivider:b=!1,maxWidth:m,truncate:h=!0,tooltipContent:j,tooltipDelay:C,isTooltipMultiline:w,tooltipPlace:S,alwaysShowTooltip:N=!1,className:O,style:P,render:R,ref:V,...D})=>{const E=_.isDefined(t)&&!(0,f.isBoolean)(t)&&t!=="",B=(0,f.isString)(t)?{text:t,tooltipContent:j}:{text:t??!1,tooltipContent:j??""};return(0,p.useRender)({render:R,ref:V,state:{size:r,variant:s,color:l,shape:a,weight:n,clickable:d,truncate:h},props:{...D,onClick:i,className:(0,g.clsx)(v.chip,O),style:{..._.isDefined(m)?{"--tw-chip-max-width":A.doNotTranslate(`calc(${m}px - 2 * var(--tw-chip-padding))`)}:{},...P},children:(0,e.jsxs)(e.Fragment,{children:[c,E&&(0,e.jsx)(y.OverflowingTextWithTooltip,{...B,render:(0,e.jsx)("span",{}),className:v.label,style:r==="md"?$:void 0,truncate:h,tooltipDelay:C,isTooltipMultiline:w,tooltipPlace:S,alwaysShowTooltip:N}),_.isDefined(u)&&u!==!1&&(0,e.jsxs)(e.Fragment,{children:[b&&(0,e.jsx)("span",{className:v.endElementDivider}),u]})]})}})},G="_root_6bfj6_1",H="_circle_6bfj6_13",T={root:G,circle:H},J=({colorName:t,color:r,variant:s,className:l,style:a,render:n,ref:i,...d})=>(0,p.useRender)({defaultTagName:"div",render:n,ref:i,props:{...d,className:(0,g.clsx)(T.root,s==="circle"&&T.circle,l),style:{"--color-sample-color":r??o.themeCssVariables.tag.background[t],"--color-sample-border-color":o.themeCssVariables.tag.text[t],...a}}}),K="_status_y5v42_1",Q="_content_y5v42_49",q={status:K,content:Q},X=({children:t,color:r,loading:s=!1,weight:l="regular",className:a,style:n,render:i,ref:d,...c})=>{const u=k.parseThemeColor(r);return(0,p.useRender)({defaultTagName:"span",render:i,ref:d,state:{loading:s,weight:l},props:{"aria-busy":s||void 0,...c,className:(0,g.clsx)(q.status,a),style:{"--tw-status-background":o.themeCssVariables.tag.background[u],"--tw-status-text-color":o.themeCssVariables.tag.text[u],...n},children:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("span",{className:q.content,children:t}),s&&(0,e.jsx)(z.Loader,{color:r,"aria-hidden":"true",render:(0,e.jsx)("span",{})})]})}})},ee="_tag_1rqsl_1",te="_content_1rqsl_46",re="_overflowingText_1rqsl_55",ae="_iconContainer_1rqsl_59",x={tag:ee,content:te,overflowingText:re,iconContainer:ae},se=({children:t,color:r,weight:s="regular",variant:l="soft",startIcon:a,truncate:n=!0,borderStyle:i="solid",className:d,style:c,render:u,ref:b,...m})=>(0,p.useRender)({defaultTagName:"span",render:u,ref:b,state:{variant:l,weight:s,truncate:n},props:{...m,className:(0,g.clsx)(x.tag,d),style:{"--tw-tag-background":r==="transparent"?"transparent":o.themeCssVariables.tag.background[r]??o.themeCssVariables.tag.background.gray,"--tw-tag-text":r==="transparent"?o.themeCssVariables.font.color.secondary:o.themeCssVariables.tag.text[r]??o.themeCssVariables.font.color.secondary,"--tw-tag-border-style":i,...c},children:(0,e.jsxs)(e.Fragment,{children:[_.isDefined(a)&&!(0,f.isBoolean)(a)&&a!==""&&(0,e.jsx)("span",{className:x.iconContainer,"aria-hidden":!0,children:a}),(0,e.jsx)("span",{className:x.content,children:(0,f.isString)(t)&&n?(0,e.jsx)(y.OverflowingTextWithTooltip,{text:t,render:(0,e.jsx)("span",{}),className:x.overflowingText}):t})]})}});Object.defineProperty(exports,"AVATAR_PROPERTIES_BY_SIZE",{enumerable:!0,get:function(){return L}});Object.defineProperty(exports,"Badge",{enumerable:!0,get:function(){return I}});Object.defineProperty(exports,"Chip",{enumerable:!0,get:function(){return U}});Object.defineProperty(exports,"ColorSample",{enumerable:!0,get:function(){return J}});Object.defineProperty(exports,"Status",{enumerable:!0,get:function(){return X}});Object.defineProperty(exports,"Tag",{enumerable:!0,get:function(){return se}});