twenty-ui 2.46.0 → 2.48.0

package/dist/components/input/NumberStepper/types/NumberStepperProps.d.ts

@@ -0,0 +1,8 @@
+import { NumberFieldInputProps } from '../../../../primitives/input/NumberField/types/NumberFieldInputProps';
+import { NumberFieldRootProps } from '../../../../primitives/input/NumberField/types/NumberFieldRootProps';
+export type NumberStepperProps = Omit<NumberFieldInputProps, 'children' | 'defaultValue' | 'disabled' | 'max' | 'min' | 'name' | 'onChange' | 'readOnly' | 'required' | 'size' | 'step' | 'type' | 'value'> & Pick<NumberFieldRootProps, 'allowOutOfRange' | 'defaultValue' | 'disabled' | 'max' | 'min' | 'name' | 'onValueChange' | 'onValueCommitted' | 'readOnly' | 'required' | 'value'> & {
+    step?: number;
+    showButtons?: boolean;
+    decrementLabel?: string;
+    incrementLabel?: string;
+};

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

@@ -1,2 +1,2 @@
 import { SearchInputProps } from './types/SearchInputProps';
-export declare const SearchInput: ({ placeholder, filterDropdown, size, id, filterButtonAriaLabel, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: SearchInputProps) => import("react").JSX.Element;
+export declare const SearchInput: ({ placeholder, actions, size, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: SearchInputProps) => import("react").JSX.Element;

package/dist/components/input/SearchInput/types/SearchInputProps.d.ts

@@ -1,6 +1,5 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { InputProps } from '../../../../primitives/input/Input/types/InputProps';
 export type SearchInputProps = InputProps & {
-    filterDropdown?: (filterButton: ReactElement) => ReactNode;
-    filterButtonAriaLabel?: string;
+    actions?: ReactNode;
 };

package/dist/{primitives → components}/input/SegmentedControl/SegmentedControl.d.ts

@@ -1,2 +1,2 @@
 import { SegmentedControlProps } from './types/SegmentedControlProps';
-export declare const SegmentedControl: <TValue extends string>({ className, itemWidth, options, ...props }: SegmentedControlProps<TValue>) => import("react").JSX.Element;
+export declare const SegmentedControl: <TValue extends string>({ className, itemWidth, options, size, ...props }: SegmentedControlProps<TValue>) => import("react").JSX.Element;

package/dist/{primitives → components}/input/SegmentedControl/types/SegmentedControlProps.d.ts

@@ -1,8 +1,10 @@
-import { RadioGroupProps } from '../../RadioGroup/types/RadioGroupProps';
+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'> & {
     itemWidth?: 'content' | 'equal';
     options: readonly SegmentedControlOption<TValue>[];
+    size?: SegmentedControlSize;
 } & ({
     'aria-label': string;
 } | {

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

@@ -0,0 +1 @@
+export type SegmentedControlSize = 'sm' | 'md';

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

@@ -15,9 +15,15 @@ export type { LightButtonProps } from './LightButton/types/LightButtonProps';
 export { LightIconButton } from './LightIconButton/LightIconButton';
 export type { LightIconButtonProps } from './LightIconButton/types/LightIconButtonProps';
 export { MainButton } from './MainButton/MainButton';
+export { NumberStepper } from './NumberStepper/NumberStepper';
+export type { NumberStepperProps } from './NumberStepper/types/NumberStepperProps';
 export { PhoneCountryPicker } from './PhoneCountryPicker/PhoneCountryPicker';
 export type { PhoneCountryOption } from './PhoneCountryPicker/types/PhoneCountryOption';
 export type { PhoneCountryPickerOptionsProps } from './PhoneCountryPicker/types/PhoneCountryPickerOptionsProps';
 export type { PhoneCountryPickerTriggerProps } from './PhoneCountryPicker/types/PhoneCountryPickerTriggerProps';
 export { SearchInput } from './SearchInput/SearchInput';
 export type { SearchInputProps } from './SearchInput/types/SearchInputProps';
+export { SegmentedControl } from './SegmentedControl/SegmentedControl';
+export type { SegmentedControlOption } from './SegmentedControl/types/SegmentedControlOption';
+export type { SegmentedControlProps } from './SegmentedControl/types/SegmentedControlProps';
+export type { SegmentedControlSize } from './SegmentedControl/types/SegmentedControlSize';

package/dist/components/input.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../Dropdown-Ckcy6ZLF.cjs"),t=require("../input-D9vXRp8R.cjs");exports.CountrySelect=t.CountrySelect;exports.CurrencyPicker=t.CurrencyPicker;exports.IconButton=e.IconButton;exports.ImageInput=t.ImageInput;exports.LightButton=t.LightButton;exports.LightIconButton=e.LightIconButton;exports.MainButton=t.MainButton;exports.PhoneCountryPicker=t.PhoneCountryPicker;exports.SearchInput=t.SearchInput;
+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;

package/dist/components/input.mjs

@@ -1,13 +1,15 @@
-import { n, r as o } from "../Dropdown-CZVEnq0N.js";
-import { a, i as s, n as e, o as u, r as i, s as c, t as m } from "../input-CKcuJwhb.js";
+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";
 export {
-  c as CountrySelect,
-  u as CurrencyPicker,
+  u as CountrySelect,
+  e as CurrencyPicker,
   o as IconButton,
-  a as ImageInput,
-  s as LightButton,
+  p as ImageInput,
+  i as LightButton,
   n as LightIconButton,
-  i as MainButton,
-  e as PhoneCountryPicker,
-  m as SearchInput
+  a as MainButton,
+  s as NumberStepper,
+  m as PhoneCountryPicker,
+  c as SearchInput,
+  I as SegmentedControl
 };

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

@@ -1,2 +1,2 @@
 import { OverflowingListProps } from './types/OverflowingListProps';
-export declare const OverflowingList: ({ children, showOverflowCount, maxInlineCount, overflowLabel, className, onMouseEnter, onMouseLeave, onFocusCapture, onBlurCapture, ref, ...props }: OverflowingListProps) => import("react").JSX.Element;
+export declare const OverflowingList: ({ children, showOverflowCount, maxInlineCount, overflowLabel, open, defaultOpen, onOpenChange, actionsRef, triggerProps, popupProps, className, onMouseEnter, onMouseLeave, onFocusCapture, onBlurCapture, ref, ...props }: OverflowingListProps) => import("react").JSX.Element;

package/dist/components/layout/OverflowingList/__stories__/OverflowingListActionsExample.d.ts

@@ -0,0 +1,7 @@
+import { OverflowingListProps } from '../types/OverflowingListProps';
+type OverflowingListActionsExampleProps = {
+    deferClose?: boolean;
+    onOpenChange?: OverflowingListProps['onOpenChange'];
+};
+export declare const OverflowingListActionsExample: ({ deferClose, onOpenChange, }: OverflowingListActionsExampleProps) => import("react").JSX.Element;
+export {};

package/dist/components/layout/OverflowingList/__stories__/OverflowingListCanceledCloseExample.d.ts

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

package/dist/components/layout/OverflowingList/__stories__/OverflowingListControlledExample.d.ts

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

package/dist/components/layout/OverflowingList/__stories__/OverflowingListControlledStateExample.d.ts

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

package/dist/components/layout/OverflowingList/__stories__/OverflowingListDisabledTriggerFocusExample.d.ts

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

package/dist/components/layout/OverflowingList/__stories__/OverflowingListEventBlockingExample.d.ts

@@ -0,0 +1,7 @@
+import { SyntheticEvent } from 'react';
+type OverflowingListEventBlockingExampleProps = {
+    onHostEvent: (event: SyntheticEvent) => void;
+    onOverrideEvent: (event: SyntheticEvent) => void;
+};
+export declare const OverflowingListEventBlockingExample: ({ onHostEvent, onOverrideEvent, }: OverflowingListEventBlockingExampleProps) => import("react").JSX.Element;
+export {};

package/dist/components/layout/OverflowingList/__stories__/OverflowingListFocusExample.d.ts

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

package/dist/components/layout/OverflowingList/__stories__/OverflowingListInstanceCleanupExample.d.ts

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

package/dist/components/layout/OverflowingList/__stories__/OverflowingListStateExample.d.ts

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

package/dist/components/layout/OverflowingList/__stories__/OverflowingListTriggerRefExample.d.ts

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

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

@@ -1,9 +1,15 @@
 import { ReactElement } from 'react';
 type OverflowingListItemProps = {
     children: ReactElement;
+    index: number;
     isHidden: boolean;
     isLastVisible: boolean;
-    onFocusedItemUnmount: () => void;
+    isInPopup: boolean;
+    onFocusLost: (options: {
+        index: number;
+        element: HTMLElement;
+        isInPopup: boolean;
+    }) => void;
 };
-export declare const OverflowingListItem: ({ children, isHidden, isLastVisible, onFocusedItemUnmount, }: OverflowingListItemProps) => import("react").JSX.Element;
+export declare const OverflowingListItem: ({ children, index, isHidden, isLastVisible, isInPopup, onFocusLost, }: OverflowingListItemProps) => import("react").JSX.Element;
 export {};

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

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+type OverflowingListItemFocusEffectProps = {
+    elementRef: RefObject<HTMLDivElement | null>;
+    isHidden: boolean;
+    onFocusLost: (element: HTMLElement) => void;
+};
+export declare const OverflowingListItemFocusEffect: import('react').MemoExoticComponent<({ elementRef, isHidden, onFocusLost, }: OverflowingListItemFocusEffectProps) => null>;
+export {};

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

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+import { OverflowingListLayout } from './types/OverflowingListLayout';
+type OverflowingListLayoutEffectProps = {
+    containerRef: RefObject<HTMLDivElement | null>;
+    itemsRef: RefObject<HTMLDivElement | null>;
+    triggerRef: RefObject<HTMLElement | null>;
+    itemCount: number;
+    inlineItemCount: number;
+    reserveCountSpace: boolean;
+    isMeasurementEnabled: boolean;
+    isOpen: boolean;
+    onLayoutChange: (layout: OverflowingListLayout) => void;
+    onOverflowUnavailable: () => void;
+};
+export declare const OverflowingListLayoutEffect: import('react').MemoExoticComponent<({ containerRef, itemsRef, triggerRef, itemCount, inlineItemCount, reserveCountSpace, isMeasurementEnabled, isOpen, onLayoutChange, onOverflowUnavailable, }: OverflowingListLayoutEffectProps) => null>;
+export {};

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

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { OverflowingListProps } from '../types/OverflowingListProps';
+type PopupRender = Exclude<NonNullable<NonNullable<OverflowingListProps['popupProps']>['render']>, ReactElement>;
+type OverflowingListPopupTargetProps = {
+    props: Parameters<PopupRender>[0];
+    state: Parameters<PopupRender>[1];
+    render: NonNullable<OverflowingListProps['popupProps']>['render'];
+};
+export declare const OverflowingListPopupTarget: ({ props, state, render, }: OverflowingListPopupTargetProps) => import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,8 @@
+export declare const focusOverflowingListFallback: ({ items, popup, trigger, root, removedIndex, excludedItem, }: {
+    items: HTMLElement | null;
+    popup: HTMLElement | null;
+    trigger: HTMLElement | null;
+    root: HTMLElement | null;
+    removedIndex: number;
+    excludedItem?: HTMLElement;
+}) => void;

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

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

package/dist/components/layout/OverflowingList/internal/types/OverflowingListLayout.d.ts

@@ -0,0 +1,4 @@
+export type OverflowingListLayout = {
+    visibleItemCount: number;
+    hasOverflow: boolean;
+};

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

@@ -1 +1 @@
-export declare const useFocusedElementUnmountRef: (onFocusedElementUnmount: () => void) => (element: HTMLElement | null) => (() => void) | undefined;
+export declare const useFocusedElementUnmountRef: (onFocusedElementUnmount: (element: HTMLElement) => void) => (element: HTMLElement | null) => (() => void) | undefined;

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-DJq0Dcmq.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-VaIq7Sjr.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-Bt-DUE1X.js";
+import { n as r, r as s, t } from "../layout-BszCDxAO.js";
 export {
   s as AnimatedIconCrossfade,
   r as OverflowingList,

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

@@ -3,9 +3,9 @@ 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: ({ 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;
     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 +13,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/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,6 +1,8 @@
+import { Dispatch, SetStateAction } from 'react';
 import { DropdownType } from '../types/DropdownType';
 import { DropdownFocusTarget } from './DropdownFocusTarget';
 import { DropdownPageFocusRequest } from './DropdownPageFocusRequest';
+import { DropdownRowFocus } from './DropdownRowFocus';
 export type DropdownContextValue = {
     type: DropdownType;
     rootType: DropdownType;
@@ -8,10 +10,9 @@ export type DropdownContextValue = {
     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 +22,7 @@ export type DropdownContextValue = {
     focusOnOpen: boolean;
     setFocusOnOpen: (focusOnOpen: boolean) => void;
     setOpen: (open: boolean) => void;
-    closeTree: () => void;
+    closeTree: (tabOutEvent?: Event) => void;
     goToPage: (page: {
         id: string;
         trigger?: DropdownFocusTarget;

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

@@ -0,0 +1,4 @@
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+type DropdownGroupProps = MenuPrimitive.Group.Props;
+export declare const DropdownGroup: ({ className, ...props }: DropdownGroupProps) => import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,4 @@
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+type DropdownGroupLabelProps = MenuPrimitive.GroupLabel.Props;
+export declare const DropdownGroupLabel: ({ className, ...props }: DropdownGroupLabelProps) => import("react").JSX.Element;
+export {};

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: ({ 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;

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

@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+export declare const getDropdownItemExplicitId: ({ id, render, }: {
+    id?: string;
+    render?: ReactElement;
+}) => string | undefined;

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/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/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/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/MenuItem/parts/MenuItemIconWithGripSwap.d.ts

@@ -1,9 +1,8 @@
-import { IconComponent } from '../../../../icon';
-import { ThemeColor } from '../../../../theme';
+import { ReactNode } from 'react';
 export type MenuItemIconWithGripSwapProps = {
-    LeftIcon: IconComponent | null | undefined;
-    iconThemeColor?: ThemeColor | null;
+    leadingContent?: ReactNode;
     withIconContainer?: boolean;
+    withIconContainerBackground?: boolean;
     gripIconColor: string;
 };
-export declare const MenuItemIconWithGripSwap: ({ LeftIcon, iconThemeColor, withIconContainer, gripIconColor, }: MenuItemIconWithGripSwapProps) => import("react").JSX.Element | null;
+export declare const MenuItemIconWithGripSwap: ({ leadingContent, withIconContainer, withIconContainerBackground, gripIconColor, }: MenuItemIconWithGripSwapProps) => import("react").JSX.Element | null;

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

@@ -1,2 +1,2 @@
 import { MenuItemDraggableProps } from './types/MenuItemDraggableProps';
-export declare const MenuItemDraggable: ({ LeftIcon, withIconContainer, accent, iconButtons, onClick, text, contextualText, isDragDisabled, className, isIconDisplayedOnHoverOnly, gripMode, }: MenuItemDraggableProps) => import("react").JSX.Element;
+export declare const MenuItemDraggable: ({ LeftIcon, LeftComponent, withIconContainer, accent, iconButtons, onClick, text, contextualText, isDragDisabled, className, isIconDisplayedOnHoverOnly, gripMode, }: MenuItemDraggableProps) => import("react").JSX.Element;

package/dist/components/navigation/MenuItemDraggable/types/MenuItemDraggableProps.d.ts

@@ -4,6 +4,7 @@ import { IconComponent } from '../../../../icon';
 import { ReactNode } from 'react';
 export type MenuItemDraggableProps = {
     LeftIcon?: IconComponent | undefined;
+    LeftComponent?: ReactNode;
     withIconContainer?: boolean;
     accent?: MenuItemAccent;
     iconButtons?: ReactNode;

package/dist/components/navigation.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../Dropdown-Ckcy6ZLF.cjs"),e=require("../navigation-CsxM7PWb.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-BKjAaZS0.cjs"),e=require("../navigation-DrOV5E67.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-CZVEnq0N.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-BVhRDMCr.js";
+import { t } from "../Dropdown-C2hXrjvD.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-B1SRvzKK.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-bRqO7Q-5.cjs");exports.SettingsRow=e.SettingsRow;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../settings-BAYsnlZJ.cjs");exports.SettingsRow=e.SettingsRow;

package/dist/components/settings.mjs

@@ -1,4 +1,4 @@
-import { t as o } from "../settings-Fpo_5Uen.js";
+import { t as o } from "../settings-BjEZiHXE.js";
 export {
   o as SettingsRow
 };

package/dist/components.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./data-display-Bw-5dsCu.cjs"),u=require("./TintedIconTile-Dp4uH0Up.cjs"),o=require("./feedback-BleeRoOP.cjs"),r=require("./Dropdown-Ckcy6ZLF.cjs"),t=require("./input-D9vXRp8R.cjs"),i=require("./layout-DJq0Dcmq.cjs"),e=require("./navigation-CsxM7PWb.cjs"),a=require("./settings-bRqO7Q-5.cjs");exports.AnimatedIconCrossfade=i.AnimatedIconCrossfade;exports.AvatarGroup=n.AvatarGroup;exports.Callout=o.Callout;exports.CommandBlock=n.CommandBlock;exports.CountrySelect=t.CountrySelect;exports.CurrencyPicker=t.CurrencyPicker;exports.DEFAULT_COLOR_LABELS=e.DEFAULT_COLOR_LABELS;exports.Dropdown=r.Dropdown;exports.IconButton=r.IconButton;exports.ImageInput=t.ImageInput;exports.InlineBanner=o.InlineBanner;exports.JsonTree=n.JsonTree;exports.LightButton=t.LightButton;exports.LightIconButton=r.LightIconButton;exports.ListItemButton=e.ListItemButton;exports.MainButton=t.MainButton;exports.MenuItem=e.MenuItem;exports.MenuItemAvatar=e.MenuItemAvatar;exports.MenuItemDraggable=e.MenuItemDraggable;exports.MenuItemSuggestion=e.MenuItemSuggestion;exports.MenuPicker=e.MenuPicker;exports.MetricRow=n.MetricRow;exports.NotificationCounter=n.NotificationCounter;exports.OverflowingList=i.OverflowingList;exports.PhoneCountryPicker=t.PhoneCountryPicker;exports.SearchInput=t.SearchInput;exports.Section=i.Section;exports.SettingsRow=a.SettingsRow;exports.TabButton=e.TabButton;exports.TintedIconTile=u.TintedIconTile;exports.Toast=o.Toast;exports.ToastProvider=o.ToastProvider;exports.Toaster=o.Toaster;exports.getIconTileColorShades=u.getIconTileColorShades;exports.useDropdownPage=e.useDropdownPage;exports.useToast=o.useToast;
+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-ybO4n69s.cjs"),r=require("./Dropdown-BKjAaZS0.cjs"),e=require("./input-3D2lXywH.cjs"),u=require("./layout-VaIq7Sjr.cjs"),t=require("./navigation-DrOV5E67.cjs"),a=require("./settings-BAYsnlZJ.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;