twenty-ui 1.0.0-alpha.2 → 2.42.0

package/dist/{feedback/Info/Info.d.ts → components/feedback/Info/types/InfoProps.d.ts}

@@ -1,10 +1,11 @@
+import { Button } from '../../../../primitives/input/Button/Button';
 import { default as React } from 'react';
-export type InfoAccent = 'blue' | 'danger';
+import { InfoAccent } from './InfoAccent';
 export type InfoProps = {
     accent?: InfoAccent;
     text: string;
     buttonTitle?: string;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    to?: string;
+    href?: string;
+    render?: React.ComponentProps<typeof Button>['render'];
 };
-export declare const Info: ({ accent, text, buttonTitle, onClick, to, }: InfoProps) => React.JSX.Element;

package/dist/{feedback → components/feedback}/InlineBanner/InlineBanner.d.ts

@@ -1,5 +1,5 @@
-import { IconComponent } from '../../icon/types/IconComponent';
-import { BannerColor } from '../Banner/Banner';
+import { IconComponent } from '../../../icon/types/IconComponent';
+import { BannerColor } from '../../../primitives/feedback/Banner/Banner';
 type InlineBannerProps = {
     color?: BannerColor;
     message: string;

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

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

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

@@ -0,0 +1 @@
+export declare const DEFAULT_TOAST_LIMIT = 3;

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

@@ -0,0 +1 @@
+export declare const ToastContext: import('react').Context<import('@base-ui/utils/store').Store<import('../types/ToastStoreState').ToastStoreState> | undefined>;

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

@@ -0,0 +1,3 @@
+export declare const useCloseToast: () => {
+    closeToast: (id?: string) => void;
+};

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

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

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

@@ -0,0 +1,7 @@
+export declare const useToast: () => {
+    enqueueToast: {
+        (options: import('../types/ToastOptions').ToastOptions): string;
+        (options: import('../types/ToastOptions').ToastOptions | undefined): string | undefined;
+    };
+    closeToast: (id?: string) => void;
+};

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

@@ -0,0 +1 @@
+export declare const useToastContext: () => import('@base-ui/utils/store').Store<import('../types/ToastStoreState').ToastStoreState>;

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

@@ -0,0 +1 @@
+export declare const useToastEntries: () => import('../types/ToastEntry').ToastEntry[];

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

@@ -0,0 +1,3 @@
+import { Store } from '@base-ui/utils/store';
+import { ToastStoreState } from '../types/ToastStoreState';
+export declare const createToastStore: (limit?: number) => Store<ToastStoreState>;

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

@@ -0,0 +1,6 @@
+import { ToastNotification } from './ToastNotification';
+export type ToastEntry = {
+    notification: ToastNotification;
+    dedupeKey?: string;
+    status: 'visible' | 'closing';
+};

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

@@ -0,0 +1,4 @@
+import { ToastOptions } from './ToastOptions';
+export type ToastNotification = Omit<ToastOptions, 'dedupeKey'> & {
+    id: string;
+};

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

@@ -0,0 +1,4 @@
+import { ToastProps } from './ToastProps';
+export type ToastOptions = Omit<ToastProps, 'ref' | 'id'> & {
+    dedupeKey?: string;
+};

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

@@ -0,0 +1,47 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { ToastVariant } from './ToastVariant';
+export type ToastProps = ComponentPropsWithRef<'div'> & {
+    /**
+     * Replaces the rendered element or composes it with another component.
+     * Accepts a React element or a function that returns the element to render.
+     */
+    render?: useRender.RenderProp;
+    /** Visual variant that selects the icon and colors. */
+    variant?: ToastVariant;
+    /** Supporting content rendered below the message. */
+    description?: ReactNode;
+    /** Replaces the variant's icon. */
+    icon?: ReactNode;
+    /**
+     * Accessible name of the default icon. Without it, the icon is hidden from
+     * assistive technology.
+     */
+    iconLabel?: string;
+    /** Content rendered in the footer, such as an action button. */
+    action?: ReactNode;
+    /**
+     * Completion percentage shown in the progress bar. When set, the countdown
+     * is disabled.
+     */
+    progress?: number;
+    /**
+     * Milliseconds before `onClose` is called. The countdown pauses while the
+     * pointer is over the toast.
+     */
+    duration?: number;
+    /**
+     * Called when the cancel button is clicked. The button renders only when
+     * this callback is provided.
+     */
+    onCancel?: () => void;
+    /**
+     * Called when the close button is clicked or the countdown completes. The
+     * button renders only when this callback is provided.
+     */
+    onClose?: () => void;
+    /** Label of the cancel button. */
+    cancelLabel?: string;
+    /** Accessible name of the close button. */
+    closeLabel?: string;
+};

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

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export type ToastProviderProps = {
+    children?: ReactNode;
+    limit?: number;
+};

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

@@ -0,0 +1,6 @@
+import { ToastEntry } from './ToastEntry';
+export type ToastStoreState = {
+    toasts: ToastEntry[];
+    limit: number;
+    mountedToasterCount: number;
+};

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

@@ -0,0 +1,6 @@
+import { createToastStore } from '../stores/createToastStore';
+import { ToastEntry } from '../types/ToastEntry';
+export declare const completeToastExit: ({ store, toast, }: {
+    store: ReturnType<typeof createToastStore>;
+    toast: ToastEntry;
+}) => void;

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

@@ -0,0 +1,7 @@
+import { createToastStore } from '../stores/createToastStore';
+import { ToastEntry } from '../types/ToastEntry';
+export declare const dismissToasts: ({ store, toastsToClose, nextToasts, }: {
+    store: ReturnType<typeof createToastStore>;
+    toastsToClose: ToastEntry[];
+    nextToasts?: ToastEntry[];
+}) => void;

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

@@ -0,0 +1,2 @@
+import { ToastEntry } from '../types/ToastEntry';
+export declare const isToastVisible: (toast: ToastEntry) => boolean;

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

@@ -0,0 +1,2 @@
+import { ToasterProps } from './types/ToasterProps';
+export declare const Toaster: ({ container, getToastProps, className, render, ref, ...props }: ToasterProps) => import('react').ReactPortal | null;

package/dist/components/feedback/Toaster/__stories__/ToastControls.d.ts

@@ -0,0 +1,5 @@
+type ToastControlsProps = {
+    onClose?: () => void;
+};
+export declare const ToastControls: ({ onClose }: ToastControlsProps) => import("react").JSX.Element;
+export {};

package/dist/components/feedback/Toaster/__stories__/ToasterExample.d.ts

@@ -0,0 +1,2 @@
+import { ToasterExampleProps } from './ToasterExampleProps';
+export declare const ToasterExample: ({ limit, onClose }: ToasterExampleProps) => import("react").JSX.Element;

package/dist/components/feedback/Toaster/__stories__/ToasterExampleProps.d.ts

@@ -0,0 +1,4 @@
+export type ToasterExampleProps = {
+    limit?: number;
+    onClose?: () => void;
+};

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

@@ -0,0 +1,9 @@
+import { ToastEntry } from '../../Toast/types/ToastEntry';
+import { ToasterProps } from '../types/ToasterProps';
+type ToasterItemProps = {
+    toastEntry: ToastEntry;
+    getToastProps?: ToasterProps['getToastProps'];
+    onClose: (id: string) => void;
+};
+export declare const ToasterItem: ({ toastEntry, getToastProps, onClose, }: ToasterItemProps) => import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+import { ToastEntry } from '../../Toast/types/ToastEntry';
+type ToasterItemExitEffectProps = {
+    elementRef: RefObject<HTMLDivElement | null>;
+    toastEntry: ToastEntry;
+};
+export declare const ToasterItemExitEffect: ({ elementRef, toastEntry, }: ToasterItemExitEffectProps) => import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import { ToasterProps } from '../types/ToasterProps';
+type ToasterItemsProps = {
+    getToastProps?: ToasterProps['getToastProps'];
+};
+export declare const ToasterItems: ({ getToastProps }: ToasterItemsProps) => import("react").JSX.Element[];
+export {};

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

@@ -0,0 +1 @@
+export declare const ToasterLifecycleEffect: () => null;

package/dist/components/feedback/Toaster/types/ToasterProps.d.ts

@@ -0,0 +1,9 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ComponentPropsWithRef } from 'react';
+import { ToastNotification } from '../../Toast/types/ToastNotification';
+import { ToastProps } from '../../Toast/types/ToastProps';
+export type ToasterProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
+    container?: HTMLElement | null;
+    getToastProps?: (toast: ToastNotification) => Partial<Omit<ToastProps, 'id' | 'onClose' | 'ref'>>;
+    render?: useRender.RenderProp;
+};

package/dist/components/index.d.ts

@@ -0,0 +1,81 @@
+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 { 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 { 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 { 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 { 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 { Section } from './layout/Section/Section';
+export type { SectionHeaderProps } from './layout/Section/types/SectionHeaderProps';
+export type { SectionRootProps } from './layout/Section/types/SectionRootProps';
+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 { 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/CardPicker/CardPicker.d.ts

@@ -0,0 +1,2 @@
+import { CardPickerProps } from './types/CardPickerProps';
+export declare const CardPicker: <TValue>({ children, className, ...props }: CardPickerProps<TValue>) => import("react").JSX.Element;

package/dist/components/input/CardPicker/types/CardPickerProps.d.ts

@@ -0,0 +1,2 @@
+import { RadioProps } from '../../../../primitives/input/Radio/types/RadioProps';
+export type CardPickerProps<TValue = string> = RadioProps<TValue>;

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

@@ -0,0 +1,2 @@
+import { ColorSchemePickerProps } from './types/ColorSchemePickerProps';
+export declare const ColorSchemePicker: ({ value, onChange, className, lightLabel, darkLabel, systemLabel, }: ColorSchemePickerProps) => import("react").JSX.Element;

package/dist/{input → components/input/ColorSchemePicker/internal}/ColorSchemeCard/ColorSchemeCard.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { ColorScheme } from '../types/ColorScheme';
+import { ColorScheme } from '../../../../../primitives/input/types/ColorScheme';
 export type ColorSchemeSegmentProps = {
     variant: ColorScheme;
     className?: string;

package/dist/components/input/ColorSchemePicker/types/ColorSchemePickerProps.d.ts

@@ -0,0 +1,9 @@
+import { ColorScheme } from '../../../../primitives/input/types/ColorScheme';
+export type ColorSchemePickerProps = {
+    value: ColorScheme;
+    className?: string;
+    onChange: (value: ColorScheme) => void;
+    lightLabel: string;
+    darkLabel: string;
+    systemLabel: string;
+};

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

@@ -0,0 +1,2 @@
+import { IconButtonProps } from './types/IconButtonProps';
+export declare const IconButton: ({ children, size, shape, className, tooltip, tooltipPlace, tooltipDelay, tooltipOffset, disabled, loading, ...props }: IconButtonProps) => import("react").JSX.Element;

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

@@ -0,0 +1,14 @@
+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'> & {
+    size?: IconButtonSize;
+    shape?: 'square' | 'round';
+    children: ReactNode;
+    'aria-label': string;
+    tooltip?: string;
+    tooltipPlace?: TooltipSide;
+    tooltipDelay?: number;
+    tooltipOffset?: number;
+};

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

@@ -0,0 +1,2 @@
+import { ButtonSize } from '../../../../primitives/input/Button/types/ButtonSize';
+export type IconButtonSize = ButtonSize | 'xs';

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

@@ -0,0 +1,2 @@
+import { LightButtonProps } from './types/LightButtonProps';
+export declare const LightButton: ({ className, emphasis, size, variant, ...props }: LightButtonProps) => import("react").JSX.Element;

package/dist/components/input/LightButton/types/LightButtonProps.d.ts

@@ -0,0 +1,4 @@
+import { ButtonProps } from '../../../../primitives/input/Button/types/ButtonProps';
+export type LightButtonProps = ButtonProps & {
+    emphasis?: 'standard' | 'subtle';
+};

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

@@ -0,0 +1,2 @@
+import { LightIconButtonProps } from './types/LightIconButtonProps';
+export declare const LightIconButton: ({ className, emphasis, size, variant, ...props }: LightIconButtonProps) => import("react").JSX.Element;

package/dist/components/input/LightIconButton/types/LightIconButtonProps.d.ts

@@ -0,0 +1,4 @@
+import { IconButtonProps } from '../../IconButton/types/IconButtonProps';
+export type LightIconButtonProps = IconButtonProps & {
+    emphasis?: 'standard' | 'subtle';
+};

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

@@ -0,0 +1,2 @@
+import { ButtonProps } from '../../../primitives/input/Button/types/ButtonProps';
+export declare const MainButton: ({ className, elevated, variant, ...props }: ButtonProps) => import("react").JSX.Element;

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

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

package/dist/{input/SearchInput/SearchInput.d.ts → components/input/SearchInput/types/SearchInputProps.d.ts}

@@ -12,4 +12,3 @@ export type SearchInputProps = {
     'aria-label'?: string;
     'aria-labelledby'?: string;
 };
-export declare const SearchInput: ({ value, onChange, placeholder, filterDropdown, autoFocus, disabled, className, id, filterButtonAriaLabel, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, }: SearchInputProps) => import("react").JSX.Element;

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

@@ -0,0 +1,2 @@
+import { SettingsRowProps } from './types/SettingsRowProps';
+export declare const SettingsRow: ({ children, startIcon, description, focused, checked, defaultChecked, onCheckedChange, disabled, readOnly, size, name, value, required, className, style, ref, ...labelProps }: SettingsRowProps) => import("react").JSX.Element;

package/dist/components/input/SettingsRow/__stories__/ControlledSettingsRowExample.d.ts

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

package/dist/components/input/SettingsRow/types/SettingsRowProps.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { SwitchProps } from '../../../../primitives/input/Switch/types/SwitchProps';
+import { ListItemProps } from '../../../../primitives/navigation/ListItem/types/ListItemProps';
+export type SettingsRowProps = Omit<ComponentPropsWithRef<'label'>, 'children' | 'htmlFor' | 'onChange' | 'onClick'> & Pick<ListItemProps, 'startIcon' | 'description' | 'focused'> & Pick<SwitchProps, 'checked' | 'defaultChecked' | 'onCheckedChange' | 'disabled' | 'readOnly' | 'size' | 'name' | 'value' | 'required'> & {
+    children: ReactNode;
+};

package/dist/{layout → components/layout}/AnimatedIconCrossfade/AnimatedIconCrossfade.d.ts

@@ -1,4 +1,4 @@
-import { IconComponent } from '../../icon/types/IconComponent';
+import { IconComponent } from '../../../icon/types/IconComponent';
 type AnimatedIconCrossfadeProps = {
     isActive: boolean;
     ActiveIcon: IconComponent;

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { SectionRootProps } from '../types/SectionRootProps';
+export declare const SectionRoot: ({ align, color, fullWidth, className, render, ref, ...props }: SectionRootProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

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

@@ -0,0 +1,9 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactNode } from 'react';
+import { HeadingProps } from '../../../../primitives/typography/Heading/types/HeadingProps';
+export type SectionHeaderProps = Omit<useRender.ComponentProps<'div'>, 'title' | 'children' | 'color'> & Pick<HeadingProps, 'level' | 'size' | 'color'> & {
+    title: ReactNode;
+    description?: ReactNode;
+    adornment?: ReactNode;
+    descriptionLineClamp?: number;
+};

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

@@ -0,0 +1,6 @@
+import { useRender } from '@base-ui/react/use-render';
+import { HeadingProps } from '../../../../primitives/typography/Heading/types/HeadingProps';
+export type SectionRootProps = Omit<useRender.ComponentProps<'div'>, 'color'> & Pick<HeadingProps, 'color'> & {
+    align?: 'left' | 'center';
+    fullWidth?: boolean;
+};

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

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

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

@@ -0,0 +1,2 @@
+import { ColorLabels } from '../types/ColorLabels';
+export declare const DEFAULT_COLOR_LABELS: ColorLabels;

package/dist/{navigation → components/navigation}/MenuItem/parts/MenuItemIcon.d.ts

@@ -1,5 +1,5 @@
-import { IconComponent } from '../../../icon';
-import { ThemeColor } from '../../../theme';
+import { IconComponent } from '../../../../icon';
+import { ThemeColor } from '../../../../theme';
 export type MenuItemIconProps = {
     Icon: IconComponent | null | undefined;
     iconThemeColor?: ThemeColor | null;

package/dist/{navigation → components/navigation}/MenuItem/parts/MenuItemIconWithGripSwap.d.ts

@@ -1,5 +1,5 @@
-import { IconComponent } from '../../../icon';
-import { ThemeColor } from '../../../theme';
+import { IconComponent } from '../../../../icon';
+import { ThemeColor } from '../../../../theme';
 export type MenuItemIconWithGripSwapProps = {
     LeftIcon: IconComponent | null | undefined;
     iconThemeColor?: ThemeColor | null;

package/dist/{navigation → components/navigation}/MenuItem/parts/MenuItemLeftContent.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import { IconComponent } from '../../../icon';
-import { ThemeColor } from '../../../theme';
 import { MenuItemDraggableGripMode } from '../types/MenuItemDraggableGripMode';
+import { IconComponent } from '../../../../icon';
+import { ThemeColor } from '../../../../theme';
 type MenuItemLeftContentProps = {
     className?: string;
     LeftComponent?: ReactNode;

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

@@ -0,0 +1,2 @@
+import { ThemeColor } from '../../../../theme';
+export type ColorLabels = Record<ThemeColor, string>;

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

@@ -0,0 +1,32 @@
+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;
+    className?: string;
+    withIconContainer?: boolean;
+    withIconContainerBackground?: boolean;
+    iconButtons?: ReactNode;
+    isIconDisplayedOnHoverOnly?: boolean;
+    isTooltipOpen?: boolean;
+    LeftIcon?: IconComponent | null;
+    iconThemeColor?: ThemeColor | null;
+    LeftComponent?: ReactNode;
+    RightIcon?: IconComponent | null;
+    RightComponent?: ReactNode;
+    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
+    onMouseLeave?: (event: MouseEvent<HTMLDivElement>) => void;
+    testId?: string;
+    disabled?: boolean;
+    text: ReactNode;
+    contextualTextPosition?: 'left' | 'right';
+    contextualText?: ReactNode;
+    hasSubMenu?: boolean;
+    focused?: boolean;
+    selected?: boolean;
+    hotKeys?: Nullable<string[]>;
+    isSubMenuOpened?: boolean;
+};

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

@@ -0,0 +1,2 @@
+import { MenuItemAvatarProps } from './types/MenuItemAvatarProps';
+export declare const MenuItemAvatar: ({ accent, className, iconButtons, isIconDisplayedOnHoverOnly, isTooltipOpen, onClick, onMouseEnter, onMouseLeave, testId, avatar, hasSubMenu, text, contextualText, }: MenuItemAvatarProps) => import("react").JSX.Element;

package/dist/components/navigation/MenuItemAvatar/types/MenuItemAvatarProps.d.ts

@@ -0,0 +1,18 @@
+import { MenuItemAccent } from '../../MenuItem/types/MenuItemAccent';
+import { AvatarProps } from '../../../../primitives/data-display/Avatar/types/AvatarProps';
+import { MouseEvent, ReactNode } from 'react';
+export type MenuItemAvatarProps = {
+    accent?: MenuItemAccent;
+    className?: string;
+    iconButtons?: ReactNode;
+    isIconDisplayedOnHoverOnly?: boolean;
+    isTooltipOpen?: boolean;
+    avatar?: Pick<AvatarProps, 'src' | 'colorSeed' | 'name' | 'size' | 'shape'> | null;
+    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
+    onMouseLeave?: (event: MouseEvent<HTMLDivElement>) => void;
+    testId?: string;
+    text: string;
+    hasSubMenu?: boolean;
+    contextualText?: ReactNode;
+};

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

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

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

@@ -0,0 +1,19 @@
+import { MenuItemAccent } from '../../MenuItem/types/MenuItemAccent';
+import { MenuItemDraggableGripMode } from '../../MenuItem/types/MenuItemDraggableGripMode';
+import { IconComponent } from '../../../../icon';
+import { ReactNode } from 'react';
+export type MenuItemDraggableProps = {
+    LeftIcon?: IconComponent | undefined;
+    withIconContainer?: boolean;
+    accent?: MenuItemAccent;
+    iconButtons?: ReactNode;
+    isTooltipOpen?: boolean;
+    onClick?: () => void;
+    text: ReactNode;
+    contextualText?: ReactNode;
+    className?: string;
+    isIconDisplayedOnHoverOnly?: boolean;
+    gripMode?: MenuItemDraggableGripMode;
+    isDragDisabled?: boolean;
+    isHoverDisabled?: boolean;
+};