twenty-ui 2.48.0 → 2.50.0

package/dist/components/input/CurrencyPicker/types/CurrencyPickerProps.d.ts

@@ -0,0 +1,10 @@
+import { DropdownContentProps } from '../../../navigation/Dropdown/types/DropdownContentProps';
+import { DropdownRootProps } from '../../../navigation/Dropdown/types/DropdownRootProps';
+import { CurrencyPickerOptionsProps } from './CurrencyPickerOptionsProps';
+import { CurrencyPickerRootProps } from './CurrencyPickerRootProps';
+import { CurrencyPickerTriggerProps } from './CurrencyPickerTriggerProps';
+export type CurrencyPickerProps = Omit<CurrencyPickerRootProps, 'children'> & CurrencyPickerTriggerProps & Pick<DropdownRootProps, 'open' | 'defaultOpen' | 'onOpenChange' | 'onEscapeKeyDown' | 'onInteractOutside'> & {
+    triggerProps?: CurrencyPickerTriggerProps;
+    contentProps?: Omit<DropdownContentProps, 'children'>;
+    optionsProps?: CurrencyPickerOptionsProps;
+};

package/dist/components/input/CurrencyPicker/types/CurrencyPickerRootProps.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { CurrencyPickerChangeEventDetails } from './CurrencyPickerChangeEventDetails';
+import { CurrencyPickerOption } from './CurrencyPickerOption';
+import { CurrencyPickerState } from './CurrencyPickerState';
+export type CurrencyPickerRootProps = {
+    currencies: readonly CurrencyPickerOption[];
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null, eventDetails: CurrencyPickerChangeEventDetails) => void;
+    closeOnSelect?: boolean;
+    disabled?: boolean;
+    selectedFirst?: boolean;
+    getOptionLabel?: (currency: CurrencyPickerOption) => ReactNode;
+    getSearchText?: (currency: CurrencyPickerOption) => string;
+    renderValue?: (state: CurrencyPickerState) => ReactNode;
+    children: ReactNode | ((state: CurrencyPickerState) => ReactNode);
+};

package/dist/components/input/CurrencyPicker/types/CurrencyPickerState.d.ts

@@ -0,0 +1,6 @@
+import { CurrencyPickerOption } from './CurrencyPickerOption';
+export type CurrencyPickerState = {
+    value: string | null;
+    selectedCurrency: CurrencyPickerOption | undefined;
+    disabled: boolean;
+};

package/dist/components/input/CurrencyPicker/types/CurrencyPickerTriggerProps.d.ts

@@ -1,4 +1,5 @@
+import { ReactNode } from 'react';
 import { DropdownTriggerProps } from '../../../navigation/Dropdown/types/DropdownTriggerProps';
-export type CurrencyPickerTriggerProps = Omit<DropdownTriggerProps, 'children' | 'value' | 'openOnHover' | 'delay' | 'closeDelay' | 'handle' | 'payload'> & {
-    value: string;
+export type CurrencyPickerTriggerProps = Omit<DropdownTriggerProps, 'value' | 'openOnHover' | 'delay' | 'closeDelay'> & {
+    placeholder?: ReactNode;
 };

package/dist/components/input/IconButton/__stories__/IconButtonExample.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+type IconButtonExampleProps = {
+    children: ReactNode;
+    label: string;
+};
+export declare const IconButtonExample: ({ children, label, }: IconButtonExampleProps) => import("react").JSX.Element;
+export {};

package/dist/components/input/PhoneCountryPicker/PhoneCountryPicker.d.ts

@@ -1,4 +1,6 @@
-export declare const PhoneCountryPicker: {
-    Trigger: ({ country, className, "aria-describedby": ariaDescribedBy, ...props }: import('..').PhoneCountryPickerTriggerProps) => import("react").JSX.Element;
-    Options: ({ countries, value, onValueChange, searchLabel, emptyLabel, }: import('..').PhoneCountryPickerOptionsProps) => import("react").JSX.Element;
+import { PhoneCountryPickerProps } from './types/PhoneCountryPickerProps';
+export declare const PhoneCountryPicker: (({ countries, value, defaultValue, onValueChange, disabled, closeOnSelect, dropdownProps, contentProps, optionsProps, ...triggerProps }: PhoneCountryPickerProps) => import("react").JSX.Element) & {
+    Root: ({ children, countries, value: controlledValue, defaultValue, onValueChange, disabled, closeOnSelect, }: import('..').PhoneCountryPickerRootProps) => import("react").JSX.Element;
+    Trigger: ({ children, disabled: triggerDisabled, className, "aria-describedby": ariaDescribedBy, ...props }: import('..').PhoneCountryPickerTriggerProps) => import("react").JSX.Element;
+    Options: ({ searchLabel, listLabel, emptyLabel, disabled: optionsDisabled, className, render, ref, ...props }: import('..').PhoneCountryPickerOptionsProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 };

package/dist/components/input/PhoneCountryPicker/__stories__/PhoneCountryPickerExample.d.ts

@@ -1,12 +1,16 @@
+import { DropdownSelectionGroupChangeEventDetails } from '../../../navigation/Dropdown/types/DropdownSelectionGroupChangeEventDetails';
 import { PhoneCountryOption } from '../types/PhoneCountryOption';
 type PhoneCountryPickerExampleProps = {
-    initialValue?: string;
+    initialValue?: string | null;
+    composition?: 'shorthand' | 'compound';
+    controlled?: boolean;
     disabled?: boolean;
     label?: string;
     countries?: readonly PhoneCountryOption[];
     searchLabel?: string;
+    listLabel?: string;
     emptyLabel?: string;
-    onValueChange?: (value: string) => void;
+    onValueChange?: (value: string | null, eventDetails: DropdownSelectionGroupChangeEventDetails) => void;
 };
-export declare const PhoneCountryPickerExample: ({ initialValue, disabled, label, countries, searchLabel, emptyLabel, onValueChange, }: PhoneCountryPickerExampleProps) => import("react").JSX.Element;
+export declare const PhoneCountryPickerExample: ({ initialValue, composition, controlled, disabled, label, countries, searchLabel, listLabel, emptyLabel, onValueChange, }: PhoneCountryPickerExampleProps) => import("react").JSX.Element;
 export {};

package/dist/components/input/PhoneCountryPicker/__stories__/testDisabledPhoneCountryPicker.d.ts

@@ -0,0 +1,5 @@
+import { PhoneCountryPickerRootProps } from '../types/PhoneCountryPickerRootProps';
+export declare const testDisabledPhoneCountryPicker: ({ canvasElement, args, }: {
+    canvasElement: HTMLElement;
+    args: Pick<PhoneCountryPickerRootProps, "onValueChange">;
+}) => Promise<void>;

package/dist/components/input/PhoneCountryPicker/__stories__/testPhoneCountryCallingCodeDirection.d.ts

@@ -0,0 +1,3 @@
+export declare const testPhoneCountryCallingCodeDirection: ({ canvasElement, }: {
+    canvasElement: HTMLElement;
+}) => Promise<void>;

package/dist/components/input/PhoneCountryPicker/__stories__/testPhoneCountryNullSelection.d.ts

@@ -0,0 +1,5 @@
+import { PhoneCountryPickerRootProps } from '../types/PhoneCountryPickerRootProps';
+export declare const testPhoneCountryNullSelection: ({ canvasElement, args, }: {
+    canvasElement: HTMLElement;
+    args: Pick<PhoneCountryPickerRootProps, "onValueChange">;
+}) => Promise<void>;

package/dist/components/input/PhoneCountryPicker/__stories__/testPhoneCountrySelection.d.ts

@@ -0,0 +1,5 @@
+import { PhoneCountryPickerRootProps } from '../types/PhoneCountryPickerRootProps';
+export declare const testPhoneCountrySelection: ({ canvasElement, args, }: {
+    canvasElement: HTMLElement;
+    args: Pick<PhoneCountryPickerRootProps, "onValueChange">;
+}) => Promise<void>;

package/dist/components/input/PhoneCountryPicker/internal/PhoneCountryPickerContext.d.ts

@@ -0,0 +1,9 @@
+import { PhoneCountryPickerRootProps } from '../types/PhoneCountryPickerRootProps';
+import { PreparedPhoneCountryOption } from './PreparedPhoneCountryOption';
+export declare const PhoneCountryPickerContext: import('react').Context<{
+    countries: readonly PreparedPhoneCountryOption[];
+    value: string | null;
+    onValueChange: NonNullable<PhoneCountryPickerRootProps["onValueChange"]>;
+    disabled: boolean;
+    closeOnSelect: boolean;
+} | null>;

package/dist/components/input/PhoneCountryPicker/internal/PhoneCountryPickerOptions.d.ts

@@ -1,2 +1,2 @@
 import { PhoneCountryPickerOptionsProps } from '../types/PhoneCountryPickerOptionsProps';
-export declare const PhoneCountryPickerOptions: ({ countries, value, onValueChange, searchLabel, emptyLabel, }: PhoneCountryPickerOptionsProps) => import("react").JSX.Element;
+export declare const PhoneCountryPickerOptions: ({ searchLabel, listLabel, emptyLabel, disabled: optionsDisabled, className, render, ref, ...props }: PhoneCountryPickerOptionsProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/components/input/PhoneCountryPicker/internal/PhoneCountryPickerRoot.d.ts

@@ -0,0 +1,2 @@
+import { PhoneCountryPickerRootProps } from '../types/PhoneCountryPickerRootProps';
+export declare const PhoneCountryPickerRoot: ({ children, countries, value: controlledValue, defaultValue, onValueChange, disabled, closeOnSelect, }: PhoneCountryPickerRootProps) => import("react").JSX.Element;

package/dist/components/input/PhoneCountryPicker/internal/PhoneCountryPickerTrigger.d.ts

@@ -1,2 +1,2 @@
 import { PhoneCountryPickerTriggerProps } from '../types/PhoneCountryPickerTriggerProps';
-export declare const PhoneCountryPickerTrigger: ({ country, className, "aria-describedby": ariaDescribedBy, ...props }: PhoneCountryPickerTriggerProps) => import("react").JSX.Element;
+export declare const PhoneCountryPickerTrigger: ({ children, disabled: triggerDisabled, className, "aria-describedby": ariaDescribedBy, ...props }: PhoneCountryPickerTriggerProps) => import("react").JSX.Element;

package/dist/components/input/PhoneCountryPicker/internal/PreparedPhoneCountryOption.d.ts

@@ -0,0 +1,5 @@
+import { PhoneCountryOption } from '../types/PhoneCountryOption';
+export type PreparedPhoneCountryOption = PhoneCountryOption & {
+    searchLabel: string;
+    searchValue: string;
+};

package/dist/components/input/PhoneCountryPicker/internal/getPhoneCountryOptionTooltipLabel.d.ts

@@ -0,0 +1,2 @@
+import { PhoneCountryOption } from '../types/PhoneCountryOption';
+export declare const getPhoneCountryOptionTooltipLabel: ({ label, callingCode, }: Pick<PhoneCountryOption, "label" | "callingCode">) => string;

package/dist/components/input/PhoneCountryPicker/internal/matchesPhoneCountrySearch.d.ts

@@ -0,0 +1,6 @@
+import { PreparedPhoneCountryOption } from './PreparedPhoneCountryOption';
+export declare const matchesPhoneCountrySearch: ({ country, normalizedSearch, callingCodeSearch, }: {
+    country: Pick<PreparedPhoneCountryOption, "searchLabel" | "searchValue" | "callingCode">;
+    normalizedSearch: string;
+    callingCodeSearch: string;
+}) => boolean;

package/dist/components/input/PhoneCountryPicker/internal/usePhoneCountryPickerContextOrThrow.d.ts

@@ -0,0 +1,7 @@
+export declare const usePhoneCountryPickerContextOrThrow: () => {
+    countries: readonly import('./PreparedPhoneCountryOption').PreparedPhoneCountryOption[];
+    value: string | null;
+    onValueChange: NonNullable<import('../..').PhoneCountryPickerRootProps["onValueChange"]>;
+    disabled: boolean;
+    closeOnSelect: boolean;
+};

package/dist/components/input/PhoneCountryPicker/types/PhoneCountryOption.d.ts

@@ -4,4 +4,5 @@ export type PhoneCountryOption = {
     label: string;
     callingCode: string;
     flag: ReactNode;
+    disabled?: boolean;
 };

package/dist/components/input/PhoneCountryPicker/types/PhoneCountryPickerOptionsProps.d.ts

@@ -1,8 +1,7 @@
-import { PhoneCountryOption } from './PhoneCountryOption';
-export type PhoneCountryPickerOptionsProps = {
-    countries: readonly PhoneCountryOption[];
-    value?: string;
-    onValueChange: (value: string) => void;
+import { useRender } from '@base-ui/react/use-render';
+export type PhoneCountryPickerOptionsProps = Omit<useRender.ComponentProps<'div'>, 'children'> & {
+    disabled?: boolean;
     searchLabel?: string;
+    listLabel?: string;
     emptyLabel?: string;
 };

package/dist/components/input/PhoneCountryPicker/types/PhoneCountryPickerProps.d.ts

@@ -0,0 +1,10 @@
+import { DropdownContentProps } from '../../../navigation/Dropdown/types/DropdownContentProps';
+import { DropdownRootProps } from '../../../navigation/Dropdown/types/DropdownRootProps';
+import { PhoneCountryPickerOptionsProps } from './PhoneCountryPickerOptionsProps';
+import { PhoneCountryPickerRootProps } from './PhoneCountryPickerRootProps';
+import { PhoneCountryPickerTriggerProps } from './PhoneCountryPickerTriggerProps';
+export type PhoneCountryPickerProps = Omit<PhoneCountryPickerRootProps, 'children'> & Omit<PhoneCountryPickerTriggerProps, 'value' | 'defaultValue'> & {
+    dropdownProps?: Omit<DropdownRootProps, 'children' | 'type' | 'multiple'>;
+    contentProps?: Omit<DropdownContentProps, 'children'>;
+    optionsProps?: PhoneCountryPickerOptionsProps;
+};

package/dist/components/input/PhoneCountryPicker/types/PhoneCountryPickerRootProps.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { DropdownSelectionGroupChangeEventDetails } from '../../../navigation/Dropdown/types/DropdownSelectionGroupChangeEventDetails';
+import { PhoneCountryOption } from './PhoneCountryOption';
+export type PhoneCountryPickerRootProps = {
+    children: ReactNode;
+    countries: readonly PhoneCountryOption[];
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null, eventDetails: DropdownSelectionGroupChangeEventDetails) => void;
+    disabled?: boolean;
+    closeOnSelect?: boolean;
+};

package/dist/components/input/PhoneCountryPicker/types/PhoneCountryPickerTriggerProps.d.ts

@@ -1,6 +1,4 @@
 import { DropdownTriggerProps } from '../../../navigation/Dropdown/types/DropdownTriggerProps';
-import { PhoneCountryOption } from './PhoneCountryOption';
-export type PhoneCountryPickerTriggerProps = Omit<DropdownTriggerProps, 'children' | 'render' | 'nativeButton' | 'aria-label'> & {
-    country?: PhoneCountryOption;
+export type PhoneCountryPickerTriggerProps = Omit<DropdownTriggerProps, 'aria-label'> & {
     'aria-label': string;
 };

package/dist/components/input/SegmentedControl/types/SegmentedControlProps.d.ts

@@ -1,7 +1,7 @@
 import { RadioGroupProps } from '../../../../primitives/input/RadioGroup/types/RadioGroupProps';
 import { SegmentedControlOption } from './SegmentedControlOption';
 import { SegmentedControlSize } from './SegmentedControlSize';
-export type SegmentedControlProps<TValue extends string = string> = Omit<RadioGroupProps<TValue>, 'aria-label' | 'aria-labelledby' | 'children' | 'role'> & {
+export type SegmentedControlProps<TValue extends string = string> = Omit<RadioGroupProps<TValue>, 'aria-label' | 'aria-labelledby' | 'children' | 'orientation' | 'role'> & {
     itemWidth?: 'content' | 'equal';
     options: readonly SegmentedControlOption<TValue>[];
     size?: SegmentedControlSize;

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

@@ -1,9 +1,17 @@
 export { CountrySelect } from './CountrySelect/CountrySelect';
 export type { CountryChoice } from './CountrySelect/types/CountryChoice';
+export type { CountrySelectOptionsProps } from './CountrySelect/types/CountrySelectOptionsProps';
+export type { CountrySelectOptionsState } from './CountrySelect/types/CountrySelectOptionsState';
 export type { CountrySelectProps } from './CountrySelect/types/CountrySelectProps';
+export type { CountrySelectRootProps } from './CountrySelect/types/CountrySelectRootProps';
+export type { CountrySelectTriggerProps } from './CountrySelect/types/CountrySelectTriggerProps';
 export { CurrencyPicker } from './CurrencyPicker/CurrencyPicker';
+export type { CurrencyPickerChangeEventDetails } from './CurrencyPicker/types/CurrencyPickerChangeEventDetails';
 export type { CurrencyPickerOption } from './CurrencyPicker/types/CurrencyPickerOption';
 export type { CurrencyPickerOptionsProps } from './CurrencyPicker/types/CurrencyPickerOptionsProps';
+export type { CurrencyPickerProps } from './CurrencyPicker/types/CurrencyPickerProps';
+export type { CurrencyPickerRootProps } from './CurrencyPicker/types/CurrencyPickerRootProps';
+export type { CurrencyPickerState } from './CurrencyPicker/types/CurrencyPickerState';
 export type { CurrencyPickerTriggerProps } from './CurrencyPicker/types/CurrencyPickerTriggerProps';
 export { IconButton } from './IconButton/IconButton';
 export type { IconButtonProps } from './IconButton/types/IconButtonProps';
@@ -20,6 +28,8 @@ export type { NumberStepperProps } from './NumberStepper/types/NumberStepperProp
 export { PhoneCountryPicker } from './PhoneCountryPicker/PhoneCountryPicker';
 export type { PhoneCountryOption } from './PhoneCountryPicker/types/PhoneCountryOption';
 export type { PhoneCountryPickerOptionsProps } from './PhoneCountryPicker/types/PhoneCountryPickerOptionsProps';
+export type { PhoneCountryPickerProps } from './PhoneCountryPicker/types/PhoneCountryPickerProps';
+export type { PhoneCountryPickerRootProps } from './PhoneCountryPicker/types/PhoneCountryPickerRootProps';
 export type { PhoneCountryPickerTriggerProps } from './PhoneCountryPicker/types/PhoneCountryPickerTriggerProps';
 export { SearchInput } from './SearchInput/SearchInput';
 export type { SearchInputProps } from './SearchInput/types/SearchInputProps';

package/dist/components/input.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../Dropdown-BKjAaZS0.cjs"),e=require("../input-3D2lXywH.cjs");exports.CountrySelect=e.CountrySelect;exports.CurrencyPicker=e.CurrencyPicker;exports.IconButton=t.IconButton;exports.ImageInput=e.ImageInput;exports.LightButton=e.LightButton;exports.LightIconButton=t.LightIconButton;exports.MainButton=e.MainButton;exports.NumberStepper=e.NumberStepper;exports.PhoneCountryPicker=e.PhoneCountryPicker;exports.SearchInput=e.SearchInput;exports.SegmentedControl=e.SegmentedControl;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../input-CvZ_uB_9.cjs"),t=require("../Dropdown-DlItz8Gh.cjs");exports.CountrySelect=e.CountrySelect;exports.CurrencyPicker=e.CurrencyPicker;exports.IconButton=t.IconButton;exports.ImageInput=e.ImageInput;exports.LightButton=e.LightButton;exports.LightIconButton=t.LightIconButton;exports.MainButton=e.MainButton;exports.NumberStepper=e.NumberStepper;exports.PhoneCountryPicker=e.PhoneCountryPicker;exports.SearchInput=e.SearchInput;exports.SegmentedControl=e.SegmentedControl;

package/dist/components/input.mjs

@@ -1,15 +1,15 @@
-import { n, r as o } from "../Dropdown-C2hXrjvD.js";
-import { a, c as e, i as s, l as u, n as c, o as i, r as m, s as p, t as I } from "../input-TM3nUdu6.js";
+import { a as o, c as a, i as n, l as r, n as e, o as s, r as u, s as i, t as c } from "../input-Qn5_aFYU.js";
+import { a as p, i as I } from "../Dropdown-ChTVyesF.js";
 export {
-  u as CountrySelect,
-  e as CurrencyPicker,
-  o as IconButton,
-  p as ImageInput,
-  i as LightButton,
-  n as LightIconButton,
-  a as MainButton,
-  s as NumberStepper,
-  m as PhoneCountryPicker,
-  c as SearchInput,
-  I as SegmentedControl
+  r as CountrySelect,
+  a as CurrencyPicker,
+  p as IconButton,
+  i as ImageInput,
+  s as LightButton,
+  I as LightIconButton,
+  o as MainButton,
+  n as NumberStepper,
+  u as PhoneCountryPicker,
+  e as SearchInput,
+  c as SegmentedControl
 };

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

@@ -1,5 +1,4 @@
-export declare const measureItemWidths: ({ items, itemElements, supportsSynchronousLayout, }: {
+export declare const measureItemWidths: ({ items, itemElements, }: {
     items: HTMLElement;
     itemElements: Element[];
-    supportsSynchronousLayout: boolean;
 }) => number[];

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

@@ -1,10 +1,9 @@
 import { OverflowingListLayout } from './types/OverflowingListLayout';
-export declare const measureOverflowingListLayout: ({ container, items, trigger, itemElements, itemCount, reserveCountSpace, supportsSynchronousLayout, }: {
+export declare const measureOverflowingListLayout: ({ container, items, trigger, itemElements, itemCount, reserveCountSpace, }: {
     container: HTMLElement;
     items: HTMLElement;
     trigger: HTMLElement | null;
     itemElements: Element[];
     itemCount: number;
     reserveCountSpace: boolean;
-    supportsSynchronousLayout: boolean;
 }) => OverflowingListLayout;

package/dist/components/layout.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../layout-VaIq7Sjr.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-iSfGrMrH.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-BszCDxAO.js";
+import { n as r, r as s, t } from "../layout-DDqeMgFv.js";
 export {
   s as AnimatedIconCrossfade,
   r as OverflowingList,

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

@@ -5,8 +5,9 @@ export declare const Dropdown: {
     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, 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: ({ selected, 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;
-    Search: ({ onValueChange, className, ...props }: import('..').DropdownSearchProps) => 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, onBlur, className, value, ref, ...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;
     Close: ({ render, children, "aria-label": ariaLabel, ...props }: import('..').DropdownCloseProps) => 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/DropdownContextValue.d.ts

@@ -3,7 +3,8 @@ import { DropdownType } from '../types/DropdownType';
 import { DropdownFocusTarget } from './DropdownFocusTarget';
 import { DropdownPageFocusRequest } from './DropdownPageFocusRequest';
 import { DropdownRowFocus } from './DropdownRowFocus';
-export type DropdownContextValue = {
+import { useDropdownSelections } from './useDropdownSelections';
+export type DropdownContextValue = ReturnType<typeof useDropdownSelections> & {
     type: DropdownType;
     rootType: DropdownType;
     open: boolean;
@@ -23,6 +24,10 @@ export type DropdownContextValue = {
     setFocusOnOpen: (focusOnOpen: boolean) => void;
     setOpen: (open: boolean) => 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, 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/DropdownSearch.d.ts

@@ -1,2 +1,2 @@
 import { DropdownSearchProps } from '../types/DropdownSearchProps';
-export declare const DropdownSearch: ({ onValueChange, className, ...props }: DropdownSearchProps) => import("react").JSX.Element;
+export declare const DropdownSearch: ({ onValueChange, onBlur, className, value, ref, ...props }: DropdownSearchProps) => import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+import { DropdownSearchProps } from '../types/DropdownSearchProps';
+type DropdownSearchEffectProps = {
+    searchRef: RefObject<HTMLInputElement | null>;
+    value: DropdownSearchProps['value'];
+};
+export declare const DropdownSearchEffect: ({ searchRef, value, }: DropdownSearchEffectProps) => 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/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

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
+import { DropdownOptionItemProps } from '../types/DropdownOptionItemProps';
 export declare const getDropdownItemExplicitId: ({ id, render, }: {
     id?: string;
-    render?: ReactElement;
+    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/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/getTrailingFocusGuard.d.ts

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

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/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[];
+};