twenty-ui 2.43.0 → 2.45.0

package/dist/components/feedback/Toast/Toast.d.ts

@@ -1,2 +1,2 @@
 import { ToastProps } from './types/ToastProps';
-export declare const Toast: ({ children, description, icon, iconLabel, action, progress, duration, onCancel, onClose, cancelLabel, closeLabel, variant, role, className, onMouseEnter, onMouseLeave, render, ref, ...props }: ToastProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare const Toast: ({ children, description, icon, iconLabel, action, progress, duration, onCancel, onClose, cancelLabel, closeLabel, variant, role, className, onMouseEnter, onMouseLeave, onFocus, onBlur, render, ref, ...props }: ToastProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/components/feedback/Toast/internal/components/ToastProgress.d.ts

@@ -0,0 +1,9 @@
+type ToastProgressProps = {
+    progress?: number;
+    duration: number;
+    isPaused: boolean;
+    barColor: string;
+    onClose?: () => void;
+};
+export declare const ToastProgress: ({ progress, duration, isPaused, barColor, onClose, }: ToastProgressProps) => import("react").JSX.Element;
+export {};

package/dist/components/feedback/Toast/{hooks → internal/hooks}/useEnqueueToast.d.ts

@@ -1,4 +1,4 @@
-import { ToastOptions } from '../types/ToastOptions';
+import { ToastOptions } from '../../types/ToastOptions';
 export declare const useEnqueueToast: () => {
     enqueueToast: {
         (options: ToastOptions): string;

package/dist/components/feedback/Toast/{types → internal/types}/ToastEntry.d.ts

@@ -1,4 +1,4 @@
-import { ToastNotification } from './ToastNotification';
+import { ToastNotification } from '../../types/ToastNotification';
 export type ToastEntry = {
     notification: ToastNotification;
     dedupeKey?: string;

package/dist/components/feedback/Toast/types/ToastProps.d.ts

@@ -27,7 +27,7 @@ export type ToastProps = ComponentPropsWithRef<'div'> & {
     progress?: number;
     /**
      * Milliseconds before `onClose` is called. The countdown pauses while the
-     * pointer is over the toast.
+     * pointer is over the toast or keyboard focus is inside it.
      */
     duration?: number;
     /**

package/dist/components/feedback/Toaster/internal/ToasterItem.d.ts

@@ -1,4 +1,4 @@
-import { ToastEntry } from '../../Toast/types/ToastEntry';
+import { ToastEntry } from '../../Toast/internal/types/ToastEntry';
 import { ToasterProps } from '../types/ToasterProps';
 type ToasterItemProps = {
     toastEntry: ToastEntry;

package/dist/components/feedback/Toaster/internal/ToasterItemExitEffect.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { ToastEntry } from '../../Toast/types/ToastEntry';
+import { ToastEntry } from '../../Toast/internal/types/ToastEntry';
 type ToasterItemExitEffectProps = {
     elementRef: RefObject<HTMLDivElement | null>;
     toastEntry: ToastEntry;

package/dist/components/index.d.ts

@@ -7,6 +7,8 @@ export type { JsonNodeHighlighting } from './data-display/JsonTree/types/JsonNod
 export type { JsonTreeEntry } from './data-display/JsonTree/types/JsonTreeEntry';
 export type { JsonTreeProps } from './data-display/JsonTree/types/JsonTreeProps';
 export type { ShouldExpandNodeInitiallyProps } from './data-display/JsonTree/types/ShouldExpandNodeInitiallyProps';
+export { MetricRow } from './data-display/MetricRow/MetricRow';
+export type { MetricRowProps } from './data-display/MetricRow/types/MetricRowProps';
 export { NotificationCounter } from './data-display/NotificationCounter/NotificationCounter';
 export { TintedIconTile } from './data-display/TintedIconTile/TintedIconTile';
 export type { TintedIconTileProps } from './data-display/TintedIconTile/types/TintedIconTileProps';
@@ -15,39 +17,24 @@ export { getIconTileColorShades } from './data-display/TintedIconTile/utils/getI
 export { Callout } from './feedback/Callout/Callout';
 export type { CalloutProps } from './feedback/Callout/types/CalloutProps';
 export type { CalloutVariant } from './feedback/Callout/types/CalloutVariant';
-export { Info } from './feedback/Info/Info';
-export type { InfoAccent } from './feedback/Info/types/InfoAccent';
-export type { InfoProps } from './feedback/Info/types/InfoProps';
 export { InlineBanner } from './feedback/InlineBanner/InlineBanner';
-export { DEFAULT_TOAST_LIMIT } from './feedback/Toast/constants/DefaultToastLimit';
-export { ToastContext } from './feedback/Toast/contexts/ToastContext';
-export { useCloseToast } from './feedback/Toast/hooks/useCloseToast';
-export { useEnqueueToast } from './feedback/Toast/hooks/useEnqueueToast';
+export type { InlineBannerButtonProps } from './feedback/InlineBanner/types/InlineBannerButtonProps';
+export type { InlineBannerProps } from './feedback/InlineBanner/types/InlineBannerProps';
 export { useToast } from './feedback/Toast/hooks/useToast';
-export { useToastContext } from './feedback/Toast/hooks/useToastContext';
-export { useToastEntries } from './feedback/Toast/hooks/useToastEntries';
-export { createToastStore } from './feedback/Toast/stores/createToastStore';
 export { Toast } from './feedback/Toast/Toast';
 export { ToastProvider } from './feedback/Toast/ToastProvider';
-export type { ToastEntry } from './feedback/Toast/types/ToastEntry';
 export type { ToastNotification } from './feedback/Toast/types/ToastNotification';
 export type { ToastOptions } from './feedback/Toast/types/ToastOptions';
 export type { ToastProps } from './feedback/Toast/types/ToastProps';
 export type { ToastProviderProps } from './feedback/Toast/types/ToastProviderProps';
-export type { ToastStoreState } from './feedback/Toast/types/ToastStoreState';
 export type { ToastVariant } from './feedback/Toast/types/ToastVariant';
-export { completeToastExit } from './feedback/Toast/utils/completeToastExit';
-export { dismissToasts } from './feedback/Toast/utils/dismissToasts';
-export { isToastVisible } from './feedback/Toast/utils/isToastVisible';
 export { Toaster } from './feedback/Toaster/Toaster';
 export type { ToasterProps } from './feedback/Toaster/types/ToasterProps';
-export { CardPicker } from './input/CardPicker/CardPicker';
-export type { CardPickerProps } from './input/CardPicker/types/CardPickerProps';
-export { ColorSchemePicker } from './input/ColorSchemePicker/ColorSchemePicker';
-export type { ColorSchemePickerProps } from './input/ColorSchemePicker/types/ColorSchemePickerProps';
 export { IconButton } from './input/IconButton/IconButton';
 export type { IconButtonProps } from './input/IconButton/types/IconButtonProps';
 export type { IconButtonSize } from './input/IconButton/types/IconButtonSize';
+export { ImageInput } from './input/ImageInput/ImageInput';
+export type { ImageInputProps } from './input/ImageInput/types/ImageInputProps';
 export { LightButton } from './input/LightButton/LightButton';
 export type { LightButtonProps } from './input/LightButton/types/LightButtonProps';
 export { LightIconButton } from './input/LightIconButton/LightIconButton';
@@ -58,13 +45,17 @@ export type { SearchInputProps } from './input/SearchInput/types/SearchInputProp
 export { SettingsRow } from './input/SettingsRow/SettingsRow';
 export type { SettingsRowProps } from './input/SettingsRow/types/SettingsRowProps';
 export { AnimatedIconCrossfade } from './layout/AnimatedIconCrossfade/AnimatedIconCrossfade';
+export { OverflowingList } from './layout/OverflowingList/OverflowingList';
+export type { OverflowingListProps } from './layout/OverflowingList/types/OverflowingListProps';
 export { Section } from './layout/Section/Section';
 export type { SectionHeaderProps } from './layout/Section/types/SectionHeaderProps';
 export type { SectionRootProps } from './layout/Section/types/SectionRootProps';
 export { Dropdown } from './navigation/Dropdown/Dropdown';
+export { useDropdownPage } from './navigation/Dropdown/hooks/useDropdownPage';
 export type { DropdownActionItemProps } from './navigation/Dropdown/types/DropdownActionItemProps';
 export type { DropdownCloseProps } from './navigation/Dropdown/types/DropdownCloseProps';
 export type { DropdownContentProps } from './navigation/Dropdown/types/DropdownContentProps';
+export type { DropdownDismissEvent } from './navigation/Dropdown/types/DropdownDismissEvent';
 export type { DropdownHeaderProps } from './navigation/Dropdown/types/DropdownHeaderProps';
 export type { DropdownOptionItemProps } from './navigation/Dropdown/types/DropdownOptionItemProps';
 export type { DropdownPageProps } from './navigation/Dropdown/types/DropdownPageProps';
@@ -90,7 +81,5 @@ export { MenuItemSuggestion } from './navigation/MenuItemSuggestion/MenuItemSugg
 export type { MenuItemSuggestionProps } from './navigation/MenuItemSuggestion/types/MenuItemSuggestionProps';
 export { MenuPicker } from './navigation/MenuPicker/MenuPicker';
 export type { MenuPickerProps } from './navigation/MenuPicker/types/MenuPickerProps';
-export { NavigationBar } from './navigation/NavigationBar/NavigationBar';
-export { RoundedLink } from './navigation/RoundedLink/RoundedLink';
 export { TabButton } from './navigation/TabButton/TabButton';
 export type { TabButtonProps } from './navigation/TabButton/types/TabButtonProps';

package/dist/components/input/IconButton/types/IconButtonProps.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { IconButtonSize } from './IconButtonSize';
 import { ButtonProps } from '../../../../primitives/input/Button/types/ButtonProps';
 import { TooltipSide } from '../../../../primitives/surfaces/Tooltip/types/TooltipSide';
-export type IconButtonProps = Omit<ButtonProps, 'size' | 'aria-label' | 'children' | 'startIcon' | 'endIcon' | 'hotkeys' | 'fullWidth' | 'soon' | 'soonLabel'> & {
+export type IconButtonProps = Omit<ButtonProps, 'size' | 'aria-label' | 'children' | 'startIcon' | 'endIcon' | 'shortcut' | 'shortcutJoinLabel' | 'fullWidth'> & {
     size?: IconButtonSize;
     shape?: 'square' | 'round';
     children: ReactNode;

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

@@ -0,0 +1,2 @@
+import { ImageInputProps } from './types/ImageInputProps';
+export declare const ImageInput: ({ src, onUpload, onRemove, onAbort, disabled, isUploading, helperText, errorMessage, uploadLabel, removeLabel, abortLabel, accept, className, render, ref, ...props }: ImageInputProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/components/input/ImageInput/__stories__/ImageInputPreviewChangesExample.d.ts

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

package/dist/components/input/ImageInput/__stories__/imageInputPreviewUrl.d.ts

@@ -0,0 +1 @@
+export declare const IMAGE_INPUT_PREVIEW_URL: string;

package/dist/components/input/ImageInput/internal/ImageInputPreview.d.ts

@@ -0,0 +1,5 @@
+type ImageInputPreviewProps = {
+    src?: string | null;
+};
+export declare const ImageInputPreview: ({ src }: ImageInputPreviewProps) => import("react").JSX.Element;
+export {};

package/dist/components/input/ImageInput/types/ImageInputProps.d.ts

@@ -0,0 +1,15 @@
+import { useRender } from '@base-ui/react/use-render';
+export type ImageInputProps = Omit<useRender.ComponentProps<'div'>, 'children' | 'onAbort'> & {
+    src?: string | null;
+    onUpload?: (file: File) => void;
+    onRemove?: () => void;
+    onAbort?: () => void;
+    disabled?: boolean;
+    isUploading?: boolean;
+    helperText?: string;
+    errorMessage?: string | null;
+    uploadLabel?: string;
+    removeLabel?: string;
+    abortLabel?: string;
+    accept?: string;
+};

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

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

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

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

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

@@ -1,14 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
-export type SearchInputProps = {
-    value: string;
-    onChange: (value: string) => void;
-    placeholder?: string;
+import { InputProps } from '../../../../primitives/input/Input/types/InputProps';
+export type SearchInputProps = InputProps & {
     filterDropdown?: (filterButton: ReactElement) => ReactNode;
-    autoFocus?: boolean;
-    disabled?: boolean;
-    className?: string;
-    id?: string;
     filterButtonAriaLabel?: string;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
 };

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

@@ -0,0 +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;

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

@@ -0,0 +1 @@
+export declare const OVERFLOWING_LIST_STORY_ITEMS: import("react").JSX.Element[];

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

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+export declare const expectOverflowingListPopupGeometry: ({ trigger, dialog, }: {
+    trigger: HTMLElement;
+    dialog: HTMLElement;
+}) => Promise<void>;

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

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+type OverflowingListItemProps = {
+    children: ReactElement;
+    isHidden: boolean;
+    isLastVisible: boolean;
+    onFocusedItemUnmount: () => void;
+};
+export declare const OverflowingListItem: ({ children, isHidden, isLastVisible, onFocusedItemUnmount, }: OverflowingListItemProps) => import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+export declare const getVisibleItemCount: ({ itemWidths, availableWidth, gap, includePartialItem, }: {
+    itemWidths: number[];
+    availableWidth: number;
+    gap: number;
+    includePartialItem: boolean;
+}) => number;

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

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

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

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

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

@@ -0,0 +1,12 @@
+export declare const useOverflowingListLayout: ({ itemCount, inlineItemCount, reserveCountSpace, isMeasurementEnabled, }: {
+    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;
+};

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

@@ -0,0 +1,7 @@
+import { ComponentPropsWithRef, ReactElement } from 'react';
+export type OverflowingListProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
+    children: ReactElement[];
+    showOverflowCount?: boolean;
+    maxInlineCount?: number;
+    overflowLabel?: string;
+};

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

@@ -2,18 +2,18 @@ import { ReactElement } from 'react';
 import { DropdownRootProps } from './types/DropdownRootProps';
 export declare const Dropdown: {
     Root: (props: DropdownRootProps) => ReactElement;
-    Trigger: ({ onKeyDown, onClick, ...props }: import('./types/DropdownTriggerProps').DropdownTriggerProps) => import("react").JSX.Element;
-    Content: ({ side, align, sideOffset, alignOffset, anchor, container, keepMounted, width, className, style, children, initialFocus, onKeyDown, onClick, onMouseDown, onPointerDown, ref, ...props }: import('./types/DropdownContentProps').DropdownContentProps) => import("react").JSX.Element;
-    ActionItem: ({ color, startIcon, endIcon, description, descriptionPlacement, hotkeys, hasSubmenu, children, render, disabled, nativeButton, closeOnClick, onClick, onFocus, page, id, ...props }: import('./types/DropdownActionItemProps').DropdownActionItemProps) => import("react").JSX.Element;
-    OptionItem: ({ selected, indicator, onSelect, closeOnSelect, color, startIcon, endIcon, description, descriptionPlacement, hotkeys, hasSubmenu, children, render, disabled, nativeButton, onClick, onFocus, id, ...props }: import('./types/DropdownOptionItemProps').DropdownOptionItemProps) => import("react").JSX.Element;
+    Trigger: ({ onKeyDown, onClick, ref, ...props }: import('./types/DropdownTriggerProps').DropdownTriggerProps) => import("react").JSX.Element;
+    Content: ({ side, align, sideOffset, alignOffset, anchor, container, keepMounted, width, className, style, children, initialFocus, onKeyDown, onClick, onMouseDown, onPointerDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }: import('./types/DropdownContentProps').DropdownContentProps) => import("react").JSX.Element;
+    ActionItem: ({ color, startIcon, endIcon, description, descriptionPlacement, shortcut, shortcutJoinLabel, hasSubmenu, children, render, disabled, nativeButton, closeOnClick, onClick, onFocus, page, id, ...props }: import('./types/DropdownActionItemProps').DropdownActionItemProps) => import("react").JSX.Element;
+    OptionItem: ({ selected, indicator, onSelect, closeOnSelect, color, startIcon, endIcon, description, descriptionPlacement, shortcut, shortcutJoinLabel, hasSubmenu, children, render, disabled, nativeButton, onClick, onFocus, id, ...props }: import('./types/DropdownOptionItemProps').DropdownOptionItemProps) => import("react").JSX.Element;
     Search: ({ onValueChange, className, ...props }: import('./types/DropdownSearchProps').DropdownSearchProps) => import("react").JSX.Element;
     Header: ({ render, ref, className, ...props }: import('./types/DropdownHeaderProps').DropdownHeaderProps) => ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
-    Title: ({ className, render, ...props }: import('./types/DropdownTitleProps').DropdownTitleProps) => import("react").JSX.Element;
+    Title: ({ className, render, ref, ...props }: import('./types/DropdownTitleProps').DropdownTitleProps) => import("react").JSX.Element;
     Close: ({ render, children, "aria-label": ariaLabel, ...props }: import('./types/DropdownCloseProps').DropdownCloseProps) => import("react").JSX.Element;
     Page: ({ id, type, children }: import('./types/DropdownPageProps').DropdownPageProps) => import("react").JSX.Element | null;
     Back: ({ children, className, onClick, ...props }: Omit<import('./types/DropdownActionItemProps').DropdownActionItemProps, "page" | "closeOnClick">) => import("react").JSX.Element;
     Submenu: ({ type, ...props }: import('./types/DropdownSubmenuProps').DropdownSubmenuProps) => import("react").JSX.Element;
-    SubmenuTrigger: ({ color, startIcon, endIcon, description, descriptionPlacement, hotkeys, hasSubmenu, children, render, disabled, nativeButton, openOnHover, onKeyDown, onFocus, id, ...props }: import('./types/DropdownSubmenuTriggerProps').DropdownSubmenuTriggerProps) => import("react").JSX.Element;
+    SubmenuTrigger: ({ color, startIcon, endIcon, description, descriptionPlacement, shortcut, shortcutJoinLabel, hasSubmenu, children, render, disabled, nativeButton, openOnHover, onKeyDown, onFocus, id, ref, ...props }: import('./types/DropdownSubmenuTriggerProps').DropdownSubmenuTriggerProps) => import("react").JSX.Element;
     Section: ({ label, scrollable, className, children, ...props }: import('./types/DropdownSectionProps').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__/DropdownContextMenuExample.d.ts

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

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

@@ -0,0 +1,4 @@
+export declare const createStoryState: <TValue>(initialValue: TValue) => {
+    set: (nextValue: TValue) => void;
+    useValue: () => TValue;
+};

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

@@ -0,0 +1,8 @@
+export declare const DROPDOWN_STORY_A11Y_PARAMETERS: {
+    config: {
+        rules: {
+            id: string;
+            selector: string;
+        }[];
+    };
+};

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

@@ -0,0 +1,6 @@
+export declare const useDropdownPage: () => {
+    page: string | undefined;
+    goToPage: (page: string) => void;
+    goBack: () => void;
+    canGoBack: boolean;
+};

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, hotkeys, hasSubmenu, 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, children, render, disabled, nativeButton, closeOnClick, onClick, onFocus, 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, container, keepMounted, width, className, style, children, initialFocus, onKeyDown, onClick, onMouseDown, onPointerDown, ref, ...props }: DropdownContentProps) => import("react").JSX.Element;
+export declare const DropdownContent: ({ side, align, sideOffset, alignOffset, anchor, container, keepMounted, width, className, style, children, initialFocus, onKeyDown, 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

@@ -24,7 +24,7 @@ export type DropdownContextValue = {
     closeTree: () => void;
     goToPage: (page: {
         id: string;
-        trigger: DropdownFocusTarget;
+        trigger?: DropdownFocusTarget;
     }) => void;
     goBack: () => void;
     registerPage: (page: {
@@ -34,4 +34,8 @@ export type DropdownContextValue = {
     registerOpenNestedRoot: () => () => void;
     searchTargetId?: string;
     setSearchTargetId: (id: string | undefined) => void;
+    triggerId?: string;
+    registerTrigger: (id: string) => () => void;
+    titleId?: string;
+    registerTitle: (id: string) => () => void;
 };

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, hotkeys, hasSubmenu, 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, children, render, disabled, nativeButton, onClick, onFocus, id, ...props }: DropdownOptionItemProps) => import("react").JSX.Element;

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

@@ -1,4 +1,4 @@
 import { DropdownRootProps } from '../types/DropdownRootProps';
-export declare const DropdownRoot: ({ children, type, open: controlledOpen, defaultOpen, onOpenChange, multiple, defaultPage, isSubmenu, }: DropdownRootProps & {
+export declare const DropdownRoot: ({ children, type, open: controlledOpen, defaultOpen, onOpenChange, onEscapeKeyDown, onInteractOutside, multiple, defaultPage, isSubmenu, }: DropdownRootProps & {
     isSubmenu?: boolean;
 }) => import("react").JSX.Element;

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, hotkeys, hasSubmenu, children, render, disabled, nativeButton, openOnHover, onKeyDown, onFocus, id, ...props }: DropdownSubmenuTriggerProps) => import("react").JSX.Element;
+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;

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

@@ -1,2 +1,2 @@
 import { DropdownTitleProps } from '../types/DropdownTitleProps';
-export declare const DropdownTitle: ({ className, render, ...props }: DropdownTitleProps) => import("react").JSX.Element;
+export declare const DropdownTitle: ({ className, render, ref, ...props }: DropdownTitleProps) => import("react").JSX.Element;

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

@@ -1,2 +1,2 @@
 import { DropdownTriggerProps } from '../types/DropdownTriggerProps';
-export declare const DropdownTrigger: ({ onKeyDown, onClick, ...props }: DropdownTriggerProps) => import("react").JSX.Element;
+export declare const DropdownTrigger: ({ onKeyDown, onClick, ref, ...props }: DropdownTriggerProps) => import("react").JSX.Element;

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

@@ -0,0 +1 @@
+export declare const getDropdownDismissTarget: (event: Event) => Element | null;

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

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

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

@@ -0,0 +1 @@
+export declare const useRegisterDropdownLabelElement: (registerElementId: (id: string) => () => void) => (element: HTMLElement | null) => (() => void) | undefined;

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

@@ -0,0 +1 @@
+export declare const useRegisteredElementId: () => readonly [string | undefined, (id: string) => () => void];

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

@@ -1,7 +1,7 @@
 import { Button as ButtonPrimitive } from '@base-ui/react/button';
 import { ReactElement } from 'react';
 import { ListItemProps } from '../../../../primitives/navigation/ListItem/types/ListItemProps';
-export type DropdownActionItemProps = Omit<ButtonPrimitive.Props, 'render' | 'className' | 'style'> & Pick<ListItemProps, 'color' | 'startIcon' | 'endIcon' | 'description' | 'descriptionPlacement' | 'hotkeys' | 'hasSubmenu'> & {
+export type DropdownActionItemProps = Omit<ButtonPrimitive.Props, 'render' | 'className' | 'style'> & Pick<ListItemProps, 'color' | 'startIcon' | 'endIcon' | 'description' | 'descriptionPlacement' | 'shortcut' | 'shortcutJoinLabel' | 'hasSubmenu'> & {
     render?: ReactElement;
     className?: string;
     style?: React.CSSProperties;

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

@@ -0,0 +1,4 @@
+export type DropdownDismissEvent = {
+    target: Element | null;
+    preventDefault: () => void;
+};

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

@@ -1,6 +1,6 @@
 import { DropdownActionItemProps } from './DropdownActionItemProps';
 export type DropdownOptionItemProps = Omit<DropdownActionItemProps, 'page' | 'closeOnClick' | 'onSelect'> & {
-    selected: boolean;
+    selected?: boolean;
     indicator?: 'check' | 'checkbox' | 'none';
     onSelect?: () => void;
     closeOnSelect?: boolean;

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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { DropdownDismissEvent } from './DropdownDismissEvent';
 import { DropdownType } from './DropdownType';
 export type DropdownRootProps = {
     children: ReactNode;
@@ -6,6 +7,8 @@ export type DropdownRootProps = {
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
+    onEscapeKeyDown?: (event: DropdownDismissEvent) => void;
+    onInteractOutside?: (event: DropdownDismissEvent) => void;
     multiple?: boolean;
     defaultPage?: string;
 };

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

@@ -1,2 +1,2 @@
 import { DropdownRootProps } from './DropdownRootProps';
-export type DropdownSubmenuProps = Omit<DropdownRootProps, 'type'> & Partial<Pick<DropdownRootProps, 'type'>>;
+export type DropdownSubmenuProps = Omit<DropdownRootProps, 'type' | 'onEscapeKeyDown' | 'onInteractOutside'> & Partial<Pick<DropdownRootProps, 'type'>>;

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

@@ -1,2 +1,2 @@
 import { MenuItemProps } from './types/MenuItemProps';
-export declare const MenuItem: ({ accent, className, withIconContainer, withIconContainerBackground, iconButtons, isIconDisplayedOnHoverOnly, LeftIcon, iconThemeColor, LeftComponent, RightIcon, RightComponent, onClick, onMouseEnter, onMouseLeave, testId, text, contextualTextPosition, contextualText, hasSubMenu, disabled, focused, selected, hotKeys, isSubMenuOpened, }: MenuItemProps) => import("react").JSX.Element;
+export declare const MenuItem: ({ accent, className, withIconContainer, withIconContainerBackground, iconButtons, isIconDisplayedOnHoverOnly, LeftIcon, iconThemeColor, LeftComponent, RightIcon, RightComponent, onClick, onMouseEnter, onMouseLeave, testId, text, contextualTextPosition, contextualText, hasSubMenu, disabled, focused, selected, shortcut, shortcutJoinLabel, isSubMenuOpened, }: MenuItemProps) => import("react").JSX.Element;

package/dist/components/navigation/MenuItem/types/MenuItemProps.d.ts

@@ -1,7 +1,7 @@
+import { ShortcutDefinition } from '../../../../primitives/typography/Shortcut/types/ShortcutDefinition';
 import { MenuItemAccent } from './MenuItemAccent';
 import { IconComponent } from '../../../../icon';
 import { ThemeColor } from '../../../../theme';
-import { Nullable } from '../../../../utilities/types/Nullable';
 import { MouseEvent, ReactNode } from 'react';
 export type MenuItemProps = {
     accent?: MenuItemAccent;
@@ -27,6 +27,7 @@ export type MenuItemProps = {
     hasSubMenu?: boolean;
     focused?: boolean;
     selected?: boolean;
-    hotKeys?: Nullable<string[]>;
+    shortcut?: ShortcutDefinition;
+    shortcutJoinLabel?: string;
     isSubMenuOpened?: boolean;
 };

package/dist/components/navigation/TabButton/types/TabButtonProps.d.ts

@@ -1,5 +1,5 @@
 import { ButtonProps } from '../../../../primitives/input/Button/types/ButtonProps';
 import { TabsTabProps } from '../../../../primitives/navigation/Tabs/types/TabsTabProps';
-export type TabButtonProps = Omit<ButtonProps, 'variant' | 'color' | 'fullWidth' | 'loading' | 'elevated' | 'hotkeys' | 'soon' | 'soonLabel'> & Pick<TabsTabProps, 'badge'> & {
+export type TabButtonProps = Omit<ButtonProps, 'variant' | 'color' | 'fullWidth' | 'loading' | 'elevated' | 'shortcut' | 'shortcutJoinLabel'> & Pick<TabsTabProps, 'badge'> & {
     active?: boolean;
 };