twenty-ui 2.45.0 → 2.46.0

package/dist/components/index.d.ts

@@ -1,85 +1,6 @@
-export { AvatarGroup } from './data-display/AvatarGroup/AvatarGroup';
-export type { AvatarGroupProps } from './data-display/AvatarGroup/types/AvatarGroupProps';
-export { CommandBlock } from './data-display/CommandBlock/CommandBlock';
-export { JsonTree } from './data-display/JsonTree/JsonTree';
-export type { GetJsonNodeHighlighting } from './data-display/JsonTree/types/GetJsonNodeHighlighting';
-export type { JsonNodeHighlighting } from './data-display/JsonTree/types/JsonNodeHighlighting';
-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';
-export type { IconTileColorShades } from './data-display/TintedIconTile/utils/getIconTileColorShades';
-export { getIconTileColorShades } from './data-display/TintedIconTile/utils/getIconTileColorShades';
-export { Callout } from './feedback/Callout/Callout';
-export type { CalloutProps } from './feedback/Callout/types/CalloutProps';
-export type { CalloutVariant } from './feedback/Callout/types/CalloutVariant';
-export { InlineBanner } from './feedback/InlineBanner/InlineBanner';
-export type { InlineBannerButtonProps } from './feedback/InlineBanner/types/InlineBannerButtonProps';
-export type { InlineBannerProps } from './feedback/InlineBanner/types/InlineBannerProps';
-export { useToast } from './feedback/Toast/hooks/useToast';
-export { Toast } from './feedback/Toast/Toast';
-export { ToastProvider } from './feedback/Toast/ToastProvider';
-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 { ToastVariant } from './feedback/Toast/types/ToastVariant';
-export { Toaster } from './feedback/Toaster/Toaster';
-export type { ToasterProps } from './feedback/Toaster/types/ToasterProps';
-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';
-export type { LightIconButtonProps } from './input/LightIconButton/types/LightIconButtonProps';
-export { MainButton } from './input/MainButton/MainButton';
-export { SearchInput } from './input/SearchInput/SearchInput';
-export type { SearchInputProps } from './input/SearchInput/types/SearchInputProps';
-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';
-export type { DropdownRootProps } from './navigation/Dropdown/types/DropdownRootProps';
-export type { DropdownSearchProps } from './navigation/Dropdown/types/DropdownSearchProps';
-export type { DropdownSectionProps } from './navigation/Dropdown/types/DropdownSectionProps';
-export type { DropdownSubmenuProps } from './navigation/Dropdown/types/DropdownSubmenuProps';
-export type { DropdownSubmenuTriggerProps } from './navigation/Dropdown/types/DropdownSubmenuTriggerProps';
-export type { DropdownTitleProps } from './navigation/Dropdown/types/DropdownTitleProps';
-export type { DropdownTriggerProps } from './navigation/Dropdown/types/DropdownTriggerProps';
-export type { DropdownType } from './navigation/Dropdown/types/DropdownType';
-export { DEFAULT_COLOR_LABELS } from './navigation/MenuItem/constants/DefaultColorLabels';
-export { MenuItem } from './navigation/MenuItem/MenuItem';
-export type { ColorLabels } from './navigation/MenuItem/types/ColorLabels';
-export type { MenuItemAccent } from './navigation/MenuItem/types/MenuItemAccent';
-export type { MenuItemDraggableGripMode } from './navigation/MenuItem/types/MenuItemDraggableGripMode';
-export type { MenuItemProps } from './navigation/MenuItem/types/MenuItemProps';
-export { MenuItemAvatar } from './navigation/MenuItemAvatar/MenuItemAvatar';
-export type { MenuItemAvatarProps } from './navigation/MenuItemAvatar/types/MenuItemAvatarProps';
-export { MenuItemDraggable } from './navigation/MenuItemDraggable/MenuItemDraggable';
-export type { MenuItemDraggableProps } from './navigation/MenuItemDraggable/types/MenuItemDraggableProps';
-export { MenuItemSuggestion } from './navigation/MenuItemSuggestion/MenuItemSuggestion';
-export type { MenuItemSuggestionProps } from './navigation/MenuItemSuggestion/types/MenuItemSuggestionProps';
-export { MenuPicker } from './navigation/MenuPicker/MenuPicker';
-export type { MenuPickerProps } from './navigation/MenuPicker/types/MenuPickerProps';
-export { TabButton } from './navigation/TabButton/TabButton';
-export type { TabButtonProps } from './navigation/TabButton/types/TabButtonProps';
+export * from './data-display';
+export * from './feedback';
+export * from './input';
+export * from './layout';
+export * from './navigation';
+export * from './settings';

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

@@ -0,0 +1,2 @@
+import { CountrySelectProps } from './types/CountrySelectProps';
+export declare const CountrySelect: ({ countries, value, onValueChange, label, searchLabel, noCountryLabel, noResultsLabel, open: controlledOpen, onOpenChange, popupProps, disabled, className, style, render, onClick, onMouseDown, onPointerDown, onKeyDown, onKeyUp, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: CountrySelectProps) => import("react").JSX.Element;

package/dist/components/input/CountrySelect/__stories__/COUNTRY_CHOICES.d.ts

@@ -0,0 +1,5 @@
+export declare const COUNTRY_CHOICES: {
+    value: string;
+    label: string;
+    flag: string;
+}[];

package/dist/components/input/CountrySelect/__stories__/CountrySelectAvailabilityExample.d.ts

@@ -0,0 +1,8 @@
+import { CountrySelectProps } from '../types/CountrySelectProps';
+type CountrySelectAvailabilityExampleProps = Partial<CountrySelectProps> & {
+    controlled?: boolean;
+    availability: 'disabled' | 'countries';
+    ignoreCloseRequests?: boolean;
+};
+export declare const CountrySelectAvailabilityExample: ({ controlled, availability, ignoreCloseRequests, onOpenChange, }: CountrySelectAvailabilityExampleProps) => import("react").JSX.Element;
+export {};

package/dist/components/input/CountrySelect/__stories__/CountrySelectExample.d.ts

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

package/dist/components/input/CountrySelect/__stories__/assertCountryAvailabilityReset.d.ts

@@ -0,0 +1,5 @@
+import { CountrySelectProps } from '../types/CountrySelectProps';
+export declare const assertCountryAvailabilityReset: ({ canvasElement, args, }: {
+    canvasElement: HTMLElement;
+    args: Partial<CountrySelectProps>;
+}) => Promise<void>;

package/dist/components/input/CountrySelect/__stories__/waitForCountryPopup.d.ts

@@ -0,0 +1,4 @@
+export declare const waitForCountryPopup: ({ canvasElement, name, }: {
+    canvasElement: HTMLElement;
+    name?: string;
+}) => Promise<HTMLElement>;

package/dist/components/input/CountrySelect/internal/CountrySelectAvailabilityEffect.d.ts

@@ -0,0 +1,7 @@
+type CountrySelectAvailabilityEffectProps = {
+    disabled: boolean;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+};
+export declare const CountrySelectAvailabilityEffect: ({ disabled, open, onOpenChange, }: CountrySelectAvailabilityEffectProps) => null;
+export {};

package/dist/components/input/CountrySelect/internal/CountrySelectOptions.d.ts

@@ -0,0 +1,11 @@
+import { CountryChoice } from '../types/CountryChoice';
+type CountrySelectOptionsProps = {
+    countries: readonly CountryChoice[];
+    value: string;
+    onValueChange: (value: string) => void;
+    searchLabel: string;
+    noCountryLabel: string;
+    noResultsLabel: string;
+};
+export declare const CountrySelectOptions: ({ countries, value, onValueChange, searchLabel, noCountryLabel, noResultsLabel, }: CountrySelectOptionsProps) => import("react").JSX.Element;
+export {};

package/dist/components/input/CountrySelect/internal/getCountrySelectLabelledBy.d.ts

@@ -0,0 +1,5 @@
+export declare const getCountrySelectLabelledBy: ({ ariaLabelledBy, ariaLabel, visibleLabelId, }: {
+    ariaLabelledBy?: string;
+    ariaLabel?: string;
+    visibleLabelId?: string;
+}) => string | undefined;

package/dist/components/input/CountrySelect/types/CountryChoice.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export type CountryChoice = {
+    value: string;
+    label: string;
+    flag?: ReactNode;
+};

package/dist/components/input/CountrySelect/types/CountrySelectProps.d.ts

@@ -0,0 +1,15 @@
+import { DropdownContentProps } from '../../../navigation/Dropdown/types/DropdownContentProps';
+import { DropdownTriggerProps } from '../../../navigation/Dropdown/types/DropdownTriggerProps';
+import { CountryChoice } from './CountryChoice';
+export type CountrySelectProps = Omit<DropdownTriggerProps, 'children' | 'value' | 'defaultValue' | 'onChange' | 'openOnHover' | 'delay' | 'closeDelay'> & {
+    countries: readonly CountryChoice[];
+    value: string;
+    onValueChange: (value: string) => void;
+    label?: string;
+    searchLabel?: string;
+    noCountryLabel?: string;
+    noResultsLabel?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    popupProps?: Omit<DropdownContentProps, 'children' | 'aria-label' | 'aria-labelledby' | 'keepMounted'>;
+};

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

@@ -0,0 +1,4 @@
+export declare const CurrencyPicker: {
+    Trigger: ({ value, className, ...props }: import('..').CurrencyPickerTriggerProps) => import("react").JSX.Element;
+    Options: ({ currencies, value, onValueChange, disabled, searchLabel, emptyLabel, className, render, ref, ...props }: import('..').CurrencyPickerOptionsProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+};

package/dist/components/input/CurrencyPicker/__stories__/CurrencyPickerExample.d.ts

@@ -0,0 +1,11 @@
+import { ComponentProps } from 'react';
+import { CurrencyPicker } from '../CurrencyPicker';
+type CurrencyPickerExampleProps = Pick<ComponentProps<typeof CurrencyPicker.Options>, 'currencies' | 'searchLabel' | 'emptyLabel' | 'onValueChange' | 'dir'> & {
+    defaultValue?: string;
+    disabled?: boolean;
+    optionsDisabled?: boolean;
+    defaultOpen?: boolean;
+    triggerLabel?: string;
+};
+export declare const CurrencyPickerExample: ({ currencies, defaultValue, disabled, optionsDisabled, defaultOpen, triggerLabel, searchLabel, emptyLabel, onValueChange, dir, }: Partial<CurrencyPickerExampleProps>) => import("react").JSX.Element;
+export {};

package/dist/components/input/CurrencyPicker/__stories__/currencyPickerStoryOptions.d.ts

@@ -0,0 +1,9 @@
+export declare const CURRENCY_PICKER_STORY_OPTIONS: ({
+    code: string;
+    name: string;
+    disabled?: undefined;
+} | {
+    code: string;
+    name: string;
+    disabled: true;
+})[];

package/dist/components/input/CurrencyPicker/__stories__/openCurrencyPicker.d.ts

@@ -0,0 +1,8 @@
+export declare const openCurrencyPicker: ({ canvasElement, triggerLabel, }: {
+    canvasElement: HTMLElement;
+    triggerLabel?: string;
+}) => Promise<{
+    trigger: HTMLElement;
+    dialog: HTMLElement;
+    search: HTMLElement;
+}>;

package/dist/components/input/CurrencyPicker/internal/CurrencyPickerOptions.d.ts

@@ -0,0 +1,2 @@
+import { CurrencyPickerOptionsProps } from '../types/CurrencyPickerOptionsProps';
+export declare const CurrencyPickerOptions: ({ currencies, value, onValueChange, disabled, searchLabel, emptyLabel, className, render, ref, ...props }: CurrencyPickerOptionsProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/components/input/CurrencyPicker/internal/CurrencyPickerTrigger.d.ts

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

package/dist/components/input/CurrencyPicker/internal/getCurrencyPickerLabel.d.ts

@@ -0,0 +1,2 @@
+import { CurrencyPickerOption } from '../types/CurrencyPickerOption';
+export declare const getCurrencyPickerLabel: ({ code, name }: CurrencyPickerOption) => string;

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

@@ -0,0 +1,5 @@
+export type CurrencyPickerOption = {
+    code: string;
+    name: string;
+    disabled?: boolean;
+};

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

@@ -0,0 +1,10 @@
+import { useRender } from '@base-ui/react/use-render';
+import { CurrencyPickerOption } from './CurrencyPickerOption';
+export type CurrencyPickerOptionsProps = Omit<useRender.ComponentProps<'div'>, 'children'> & {
+    currencies: readonly CurrencyPickerOption[];
+    value?: string;
+    onValueChange: (code: string) => void;
+    disabled?: boolean;
+    searchLabel?: string;
+    emptyLabel?: string;
+};

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

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

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

@@ -2,13 +2,18 @@ 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' | 'shortcut' | 'shortcutJoinLabel' | 'fullWidth'> & {
+export type IconButtonProps = Omit<ButtonProps, 'size' | 'aria-label' | 'aria-labelledby' | 'children' | 'startIcon' | 'endIcon' | 'shortcut' | 'shortcutJoinLabel' | 'fullWidth' | 'loadingPosition'> & {
     size?: IconButtonSize;
     shape?: 'square' | 'round';
     children: ReactNode;
-    'aria-label': string;
     tooltip?: string;
     tooltipPlace?: TooltipSide;
     tooltipDelay?: number;
     tooltipOffset?: number;
-};
+} & ({
+    'aria-label': string;
+    'aria-labelledby'?: string;
+} | {
+    'aria-label'?: string;
+    'aria-labelledby': string;
+});

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

@@ -1,2 +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>>;
+export declare const ImageInput: ({ src, onFileSelect, onRemove, onAbort, disabled, isUploading, helperText, errorMessage, uploadLabel, removeLabel, abortLabel, accept, inputRef, onChange, "aria-describedby": ariaDescribedBy, className, style, dir, render, ref, ...inputProps }: ImageInputProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

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

@@ -1,15 +1,15 @@
 import { useRender } from '@base-ui/react/use-render';
-export type ImageInputProps = Omit<useRender.ComponentProps<'div'>, 'children' | 'onAbort'> & {
+import { ComponentPropsWithRef } from 'react';
+export type ImageInputProps = Omit<ComponentPropsWithRef<'input'>, 'children' | 'dangerouslySetInnerHTML' | 'type' | 'multiple' | 'value' | 'defaultValue' | 'hidden' | 'onAbort' | 'src' | 'ref' | 'className' | 'style'> & Pick<useRender.ComponentProps<'div'>, 'ref' | 'render' | 'className' | 'style'> & {
     src?: string | null;
-    onUpload?: (file: File) => void;
+    onFileSelect?: (file: File) => void;
     onRemove?: () => void;
     onAbort?: () => void;
-    disabled?: boolean;
     isUploading?: boolean;
     helperText?: string;
     errorMessage?: string | null;
     uploadLabel?: string;
     removeLabel?: string;
     abortLabel?: string;
-    accept?: string;
+    inputRef?: ComponentPropsWithRef<'input'>['ref'];
 };

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

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

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

@@ -0,0 +1,12 @@
+import { PhoneCountryOption } from '../types/PhoneCountryOption';
+type PhoneCountryPickerExampleProps = {
+    initialValue?: string;
+    disabled?: boolean;
+    label?: string;
+    countries?: readonly PhoneCountryOption[];
+    searchLabel?: string;
+    emptyLabel?: string;
+    onValueChange?: (value: string) => void;
+};
+export declare const PhoneCountryPickerExample: ({ initialValue, disabled, label, countries, searchLabel, emptyLabel, onValueChange, }: PhoneCountryPickerExampleProps) => import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,8 @@
+export declare const openPhoneCountryPicker: ({ canvasElement, label, }: {
+    canvasElement: HTMLElement;
+    label?: string;
+}) => Promise<{
+    dialog: HTMLElement;
+    search: HTMLElement;
+    trigger: HTMLElement;
+}>;

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

@@ -0,0 +1,2 @@
+import { PhoneCountryOption } from '../types/PhoneCountryOption';
+export declare const PHONE_COUNTRY_OPTIONS: readonly PhoneCountryOption[];

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

@@ -0,0 +1,12 @@
+export declare const PHONE_COUNTRY_PICKER_STORY_A11Y_PARAMETERS: {
+    config: {
+        rules: ({
+            id: string;
+            enabled: boolean;
+        } | {
+            id: string;
+            selector: string;
+        })[];
+    };
+    test: string;
+};

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

@@ -0,0 +1,2 @@
+import { PhoneCountryPickerOptionsProps } from '../types/PhoneCountryPickerOptionsProps';
+export declare const PhoneCountryPickerOptions: ({ countries, value, onValueChange, searchLabel, emptyLabel, }: PhoneCountryPickerOptionsProps) => import("react").JSX.Element;

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export type PhoneCountryOption = {
+    value: string;
+    label: string;
+    callingCode: string;
+    flag: ReactNode;
+};

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

@@ -0,0 +1,8 @@
+import { PhoneCountryOption } from './PhoneCountryOption';
+export type PhoneCountryPickerOptionsProps = {
+    countries: readonly PhoneCountryOption[];
+    value?: string;
+    onValueChange: (value: string) => void;
+    searchLabel?: string;
+    emptyLabel?: string;
+};

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

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

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

@@ -0,0 +1,23 @@
+export { CountrySelect } from './CountrySelect/CountrySelect';
+export type { CountryChoice } from './CountrySelect/types/CountryChoice';
+export type { CountrySelectProps } from './CountrySelect/types/CountrySelectProps';
+export { CurrencyPicker } from './CurrencyPicker/CurrencyPicker';
+export type { CurrencyPickerOption } from './CurrencyPicker/types/CurrencyPickerOption';
+export type { CurrencyPickerOptionsProps } from './CurrencyPicker/types/CurrencyPickerOptionsProps';
+export type { CurrencyPickerTriggerProps } from './CurrencyPicker/types/CurrencyPickerTriggerProps';
+export { IconButton } from './IconButton/IconButton';
+export type { IconButtonProps } from './IconButton/types/IconButtonProps';
+export type { IconButtonSize } from './IconButton/types/IconButtonSize';
+export { ImageInput } from './ImageInput/ImageInput';
+export type { ImageInputProps } from './ImageInput/types/ImageInputProps';
+export { LightButton } from './LightButton/LightButton';
+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 { 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';

package/dist/components/input.cjs

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

package/dist/components/input.mjs

@@ -0,0 +1,13 @@
+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";
+export {
+  c as CountrySelect,
+  u as CurrencyPicker,
+  o as IconButton,
+  a as ImageInput,
+  s as LightButton,
+  n as LightIconButton,
+  i as MainButton,
+  e as PhoneCountryPicker,
+  m as SearchInput
+};

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

@@ -1,9 +1,2 @@
-import { IconComponent } from '../../../icon/types/IconComponent';
-type AnimatedIconCrossfadeProps = {
-    isActive: boolean;
-    ActiveIcon: IconComponent;
-    InactiveIcon: IconComponent;
-    size?: number;
-};
-export declare const AnimatedIconCrossfade: ({ isActive, ActiveIcon, InactiveIcon, size, }: AnimatedIconCrossfadeProps) => import("react").JSX.Element;
-export {};
+import { AnimatedIconCrossfadeProps } from './types/AnimatedIconCrossfadeProps';
+export declare const AnimatedIconCrossfade: ({ isActive, activeIcon, inactiveIcon, className, render, ref, ...props }: AnimatedIconCrossfadeProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/components/layout/AnimatedIconCrossfade/types/AnimatedIconCrossfadeProps.d.ts

@@ -0,0 +1,7 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactNode } from 'react';
+export type AnimatedIconCrossfadeProps = Omit<useRender.ComponentProps<'span'>, 'children'> & {
+    isActive: boolean;
+    activeIcon: ReactNode;
+    inactiveIcon: ReactNode;
+};

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

@@ -1,4 +1,4 @@
 export declare const Section: {
-    Root: ({ align, color, fullWidth, className, render, ref, ...props }: import('./types/SectionRootProps').SectionRootProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
-    Header: ({ title, description, adornment, level, size, color, descriptionLineClamp, render, ref, className, ...props }: import('./types/SectionHeaderProps').SectionHeaderProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+    Root: ({ align, color, fullWidth, className, render, ref, ...props }: import('..').SectionRootProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+    Header: ({ title, description, actions, level, size, color, descriptionLineClamp, isDescriptionFocusable, render, ref, className, ...props }: import('..').SectionHeaderProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 };

package/dist/components/layout/Section/internal/SectionHeader.d.ts

@@ -1,2 +1,2 @@
 import { SectionHeaderProps } from '../types/SectionHeaderProps';
-export declare const SectionHeader: ({ title, description, adornment, level, size, color, descriptionLineClamp, render, ref, className, ...props }: SectionHeaderProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare const SectionHeader: ({ title, description, actions, level, size, color, descriptionLineClamp, isDescriptionFocusable, render, ref, className, ...props }: SectionHeaderProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/components/layout/Section/types/SectionHeaderProps.d.ts

@@ -4,6 +4,7 @@ import { HeadingProps } from '../../../../primitives/typography/Heading/types/He
 export type SectionHeaderProps = Omit<useRender.ComponentProps<'div'>, 'title' | 'children' | 'color'> & Pick<HeadingProps, 'level' | 'size' | 'color'> & {
     title: ReactNode;
     description?: ReactNode;
-    adornment?: ReactNode;
-    descriptionLineClamp?: number;
+    actions?: ReactNode;
+    descriptionLineClamp?: number | false;
+    isDescriptionFocusable?: boolean;
 };

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

@@ -0,0 +1,7 @@
+export { AnimatedIconCrossfade } from './AnimatedIconCrossfade/AnimatedIconCrossfade';
+export type { AnimatedIconCrossfadeProps } from './AnimatedIconCrossfade/types/AnimatedIconCrossfadeProps';
+export { OverflowingList } from './OverflowingList/OverflowingList';
+export type { OverflowingListProps } from './OverflowingList/types/OverflowingListProps';
+export { Section } from './Section/Section';
+export type { SectionHeaderProps } from './Section/types/SectionHeaderProps';
+export type { SectionRootProps } from './Section/types/SectionRootProps';

package/dist/components/layout.cjs

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

package/dist/components/layout.mjs

@@ -0,0 +1,6 @@
+import { n as r, r as s, t } from "../layout-Bt-DUE1X.js";
+export {
+  s as AnimatedIconCrossfade,
+  r as OverflowingList,
+  t as Section
+};

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

@@ -2,19 +2,19 @@ import { ReactElement } from 'react';
 import { DropdownRootProps } from './types/DropdownRootProps';
 export declare const Dropdown: {
     Root: (props: DropdownRootProps) => ReactElement;
-    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, 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, 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;
+    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;
+    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;
+    Close: ({ render, children, "aria-label": ariaLabel, ...props }: import('..').DropdownCloseProps) => import("react").JSX.Element;
+    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;
+    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;
     Empty: ({ 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, 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, onFocus, page, id, ...props }: DropdownActionItemProps) => import("react").JSX.Element;

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

@@ -1,2 +1,2 @@
 import { DropdownActionItemProps } from '../types/DropdownActionItemProps';
-export declare const DropdownBack: ({ children, className, onClick, ...props }: Omit<DropdownActionItemProps, "page" | "closeOnClick">) => import("react").JSX.Element;
+export declare const DropdownBack: ({ children, className, onClick, ...props }: Omit<DropdownActionItemProps, "page" | "closeOnClick" | "actions" | "actionsVisibility">) => 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, "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, onInput, onClick, onMouseDown, onPointerDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }: DropdownContentProps) => import("react").JSX.Element;

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

@@ -0,0 +1,4 @@
+import { useRender } from '@base-ui/react/use-render';
+type DropdownItemOwnerProps = useRender.ComponentProps<'button'>;
+export declare const DropdownItemOwner: ({ render, ref, disabled, ...props }: DropdownItemOwnerProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export {};

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

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { ListItemProps } from '../../../../primitives/navigation/ListItem/types/ListItemProps';
+type DropdownItemWithActionsProps = Pick<ListItemProps, 'actions' | 'actionsVisibility' | 'color' | 'selected' | 'focused' | 'indicator' | 'disabled' | 'hasSubmenu'> & {
+    children: ReactNode;
+};
+export declare const DropdownItemWithActions: ({ actions, actionsVisibility, color, selected, focused, indicator, disabled, hasSubmenu, children, }: DropdownItemWithActionsProps) => import("react").JSX.Element;
+export {};