@servicetitan/anvil2 1.44.2 → 1.45.1

package/dist/components/Toolbar/Toolbar.d.ts

@@ -1,59 +1,31 @@
-import { ToolbarProps as CoreToolbarProps, ToolbarButtonProps as CoreToolbarButtonProps, ToolbarButtonToggleProps as CoreToolbarButtonToggleProps, ToolbarButtonLinkProps as CoreToolbarButtonLinkProps, ToolbarSelectProps as CoreToolbarSelectProps, ToolbarOverflowTypes as CoreToolbarOverflowTypes, ToolbarItemAppearance as CoreToolbarItemAppearance } from '@servicetitan/hammer-react';
-import { DataTrackingId } from '../../types/DataTrackingId';
+import { ToolbarOverflowTypes } from './types';
+import { ComponentPropsWithoutRef, ReactElement } from 'react';
+import { LayoutUtilProps } from '../../types';
 /**
- * Props for the Toolbar component with tracking support
- * @property {string} associatedContent - Description of the content this toolbar is associated with, used for accessibility
- * @property {"vertical" | "horizontal"} [direction] - Orientation of the toolbar
- * @property {ToolbarOverflowTypes} [overflow] - How to handle overflow when items don't fit
- * @property {ReactElement[]} [additionalItems] - Additional items to display in the overflow menu
- * @extends DataTrackingId
+ * Props for the Toolbar component
+ * @extends ComponentPropsWithoutRef<"div">
+ * @extends LayoutUtilProps
  */
-export type ToolbarProps = CoreToolbarProps & DataTrackingId;
-/**
- * Props for the ToolbarButton component with tracking support
- * @property {ToolbarItemAppearance} [appearance] - Visual appearance of the button
- * @property {string} [aria-label] - Accessible label for the button
- * @property {React.ReactNode} [children] - Button content
- * @property {boolean} [disabled] - Whether the button is disabled
- * @extends DataTrackingId
- */
-export type ToolbarButtonProps = CoreToolbarButtonProps & DataTrackingId;
-/**
- * Props for the ToolbarButtonToggle component with tracking support
- * @property {boolean} [checked] - Whether the toggle is checked
- * @property {boolean} [disabled] - Whether the toggle is disabled
- * @property {string} [aria-label] - Accessible label for the toggle
- * @property {React.ReactNode} [children] - Toggle content
- * @extends DataTrackingId
- */
-export type ToolbarButtonToggleProps = CoreToolbarButtonToggleProps & DataTrackingId;
-/**
- * Props for the ToolbarButtonLink component with tracking support
- * @property {string} [href] - Link destination URL
- * @property {boolean} [disabled] - Whether the link is disabled
- * @property {string} [aria-label] - Accessible label for the link
- * @property {React.ReactNode} [children] - Link content
- * @property {string} [target] - Link target attribute
- * @extends DataTrackingId
- */
-export type ToolbarButtonLinkProps = CoreToolbarButtonLinkProps & DataTrackingId;
-/**
- * Props for the ToolbarSelect component with tracking support
- * @property {string} [selected] - Currently selected item ID
- * @property {boolean} [disabled] - Whether the select is disabled
- * @property {string} [aria-label] - Accessible label for the select
- * @property {unknown[]} [items] - Array of selectable items
- * @extends DataTrackingId
- */
-export type ToolbarSelectProps<T> = CoreToolbarSelectProps<T> & DataTrackingId;
-/**
- * Toolbar overflow behavior options
- */
-export type ToolbarOverflowTypes = CoreToolbarOverflowTypes;
-/**
- * Toolbar item appearance options
- */
-export type ToolbarItemAppearance = CoreToolbarItemAppearance;
+export type ToolbarProps = ComponentPropsWithoutRef<"div"> & LayoutUtilProps & {
+    /**
+     * Description of the content this toolbar is associated with, used for accessibility
+     */
+    associatedContent: string;
+    /**
+     * Orientation of the toolbar
+     * @default horizontal
+     */
+    direction?: "vertical" | "horizontal";
+    /**
+     * How to handle overflow when items don't fit
+     * @default wrap
+     */
+    overflow?: ToolbarOverflowTypes;
+    /**
+     * Additional items to display in the overflow menu
+     */
+    additionalItems?: ReactElement[];
+};
 /**
  * Toolbar component for grouping related interactive elements with anvil2 tracking.
  *
@@ -80,88 +52,26 @@ export type ToolbarItemAppearance = CoreToolbarItemAppearance;
  *   />
  * </Toolbar>
  */
-export declare function ToolbarElement(props: ToolbarProps): import("react/jsx-runtime").JSX.Element;
-/**
- * ToolbarButton component for standard clickable actions within a toolbar with anvil2 tracking.
- *
- * Features:
- * - Designed specifically for toolbar integration
- * - Consistent styling with other toolbar items
- * - Automatic tooltip for icon-only buttons
- * - Overflow menu support
- * - Accessibility enforcement for aria-labels
- * - Small size optimized for toolbar layout
- * - Ghost and primary appearance options
- * - Automatic tracking ID generation for analytics
- *
- * @example
- * <Toolbar.Button icon={BoldIcon} aria-label="Bold text" />
- *
- * @example
- * <Toolbar.Button appearance="primary">
- *   Save
- * </Toolbar.Button>
- */
-export declare function ToolbarButton(props: ToolbarButtonProps): import("react/jsx-runtime").JSX.Element;
-/**
- * ToolbarButtonToggle component for toggleable actions within a toolbar with anvil2 tracking.
- *
- * Features:
- * - Toggle state management
- * - Designed specifically for toolbar integration
- * - Consistent styling with other toolbar items
- * - Overflow menu support
- * - Accessibility enforcement for aria-labels
- * - Small size optimized for toolbar layout
- * - Ghost and primary appearance options
- * - Automatic tracking ID generation for analytics
- *
- * @example
- * <Toolbar.ButtonToggle icon={BoldIcon} aria-label="Bold" checked={isBold} />
- */
-export declare function ToolbarButtonToggle(props: ToolbarButtonToggleProps): import("react/jsx-runtime").JSX.Element;
-/**
- * ToolbarButtonLink component for link actions within a toolbar with anvil2 tracking.
- *
- * Features:
- * - Link functionality with href support
- * - Designed specifically for toolbar integration
- * - Consistent styling with other toolbar items
- * - Overflow menu support
- * - Accessibility enforcement for aria-labels
- * - Small size optimized for toolbar layout
- * - Ghost and primary appearance options
- * - Automatic tracking ID generation for analytics
- *
- * @example
- * <Toolbar.ButtonLink href="/help">
- *   Help
- * </Toolbar.ButtonLink>
- */
-export declare function ToolbarButtonLink(props: ToolbarButtonLinkProps): import("react/jsx-runtime").JSX.Element;
-/**
- * ToolbarSelect component provides a dropdown selector within a toolbar with anvil2 tracking.
- *
- * Features:
- * - Dropdown menu with selectable options
- * - Controlled and uncontrolled usage patterns
- * - Automatic overflow menu integration
- * - Accessibility support with proper ARIA labels
- * - Small size optimized for toolbar layout
- * - Ghost and primary appearance options
- * - Dropdown arrow icon indicator
- * - Listbox integration for keyboard navigation
- * - Automatic tracking ID generation for analytics
- *
- * @example
- * <Toolbar.Select
- *   items={fontOptions}
- *   selected="arial"
- *   accessibleLabel="Font family"
- *   onChange={(id) => setFont(id)}
- * />
- */
-export declare function ToolbarSelect(props: ToolbarSelectProps<unknown>): import("react/jsx-runtime").JSX.Element;
+export declare const ToolbarElement: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & LayoutUtilProps & {
+    /**
+     * Description of the content this toolbar is associated with, used for accessibility
+     */
+    associatedContent: string;
+    /**
+     * Orientation of the toolbar
+     * @default horizontal
+     */
+    direction?: "vertical" | "horizontal";
+    /**
+     * How to handle overflow when items don't fit
+     * @default wrap
+     */
+    overflow?: ToolbarOverflowTypes;
+    /**
+     * Additional items to display in the overflow menu
+     */
+    additionalItems?: ReactElement[];
+} & import('react').RefAttributes<HTMLDivElement>>;
 /**
  * Toolbar component for grouping related interactive elements.
  *
@@ -186,7 +96,26 @@ export declare function ToolbarSelect(props: ToolbarSelectProps<unknown>): impor
  *   />
  * </Toolbar>
  */
-export declare const Toolbar: typeof ToolbarElement & {
+export declare const Toolbar: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & LayoutUtilProps & {
+    /**
+     * Description of the content this toolbar is associated with, used for accessibility
+     */
+    associatedContent: string;
+    /**
+     * Orientation of the toolbar
+     * @default horizontal
+     */
+    direction?: "vertical" | "horizontal";
+    /**
+     * How to handle overflow when items don't fit
+     * @default wrap
+     */
+    overflow?: ToolbarOverflowTypes;
+    /**
+     * Additional items to display in the overflow menu
+     */
+    additionalItems?: ReactElement[];
+} & import('react').RefAttributes<HTMLDivElement>> & {
     /**
      * ToolbarButton component for standard clickable actions within a toolbar with anvil2 tracking.
      *
@@ -208,7 +137,7 @@ export declare const Toolbar: typeof ToolbarElement & {
      *   Save
      * </Toolbar.Button>
      */
-    Button: typeof ToolbarButton;
+    Button: import('react').ForwardRefExoticComponent<import('./ToolbarButton').ToolbarButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
     /**
      * ToolbarButtonToggle component for toggleable actions within a toolbar with anvil2 tracking.
      *
@@ -225,7 +154,7 @@ export declare const Toolbar: typeof ToolbarElement & {
      * @example
      * <Toolbar.ButtonToggle icon={BoldIcon} aria-label="Bold" checked={isBold} />
      */
-    ButtonToggle: typeof ToolbarButtonToggle;
+    ButtonToggle: import('react').ForwardRefExoticComponent<import('./ToolbarButtonToggle').ToolbarButtonToggleProps & import('react').RefAttributes<HTMLButtonElement>>;
     /**
      * ToolbarButtonLink component for link actions within a toolbar with anvil2 tracking.
      *
@@ -244,7 +173,7 @@ export declare const Toolbar: typeof ToolbarElement & {
      *   Help
      * </Toolbar.ButtonLink>
      */
-    ButtonLink: typeof ToolbarButtonLink;
+    ButtonLink: import('react').ForwardRefExoticComponent<import('./ToolbarButtonLink').ToolbarButtonLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
     /**
      * ToolbarSelect component provides a dropdown selector within a toolbar with anvil2 tracking.
      *
@@ -267,5 +196,34 @@ export declare const Toolbar: typeof ToolbarElement & {
      *   onChange={(id) => setFont(id)}
      * />
      */
-    Select: typeof ToolbarSelect;
+    Select: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & LayoutUtilProps & {
+        appearance?: import('../..').ButtonAppearance;
+        size?: Extract<import('../..').Size, "small" | "medium" | "large">;
+        loading?: boolean;
+    } & {
+        children?: ComponentPropsWithoutRef<"button">["children"];
+        icon?: import('..').IconProps["svg"] | {
+            after: import('..').IconProps["svg"];
+        } | {
+            before: import('..').IconProps["svg"];
+        };
+    } & import('../..').DataTrackingId & import('react').RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & LayoutUtilProps & {
+        appearance?: import('../..').ButtonAppearance;
+        size?: Extract<import('../..').Size, "small" | "medium" | "large">;
+        loading?: boolean;
+    } & {
+        children?: never;
+        icon?: import('..').IconProps["svg"];
+    } & import('../..').DataTrackingId & import('react').RefAttributes<HTMLButtonElement>, "ref">, "onChange" | "appearance"> & {
+        appearance?: import('./types').ToolbarItemAppearance;
+        onChange?: (optionId: string) => void;
+        selected?: string;
+        items: (Record<string, unknown> & {
+            id: string;
+        } & {
+            label: string;
+            disabled?: boolean;
+        })[];
+        accessibleLabel: string;
+    } & import('../..').DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;
 };

package/dist/components/Toolbar/ToolbarButton.d.ts

@@ -0,0 +1,41 @@
+import { ButtonProps } from '../Button';
+import { ToolbarItemAppearance, WithAriaLabelEnforcement } from './types';
+import { DataTrackingId } from '../../types';
+/**
+ * Base props for the ToolbarButton component
+ * @extends Omit<ButtonProps, "appearance" | "aria-label" | "children">
+ */
+type ToolbarButtonBaseProps = Omit<ButtonProps, "appearance" | "aria-label" | "children"> & {
+    /**
+     * Visual appearance of the button
+     * @default ghost
+     */
+    appearance?: ToolbarItemAppearance;
+};
+/**
+ * Props for the ToolbarButton component
+ * @extends WithAriaLabelEnforcement<ToolbarButtonBaseProps>
+ */
+export type ToolbarButtonProps = WithAriaLabelEnforcement<ToolbarButtonBaseProps> & DataTrackingId;
+/**
+ * ToolbarButton component for standard clickable actions within a toolbar.
+ *
+ * Features:
+ * - Designed specifically for toolbar integration
+ * - Consistent styling with other toolbar items
+ * - Automatic tooltip for icon-only buttons
+ * - Overflow menu support
+ * - Accessibility enforcement for aria-labels
+ * - Small size optimized for toolbar layout
+ * - Ghost and primary appearance options
+ *
+ * @example
+ * <ToolbarButton icon={BoldIcon} aria-label="Bold text" />
+ *
+ * @example
+ * <ToolbarButton appearance="primary">
+ *   Save
+ * </ToolbarButton>
+ */
+export declare const ToolbarButton: import('react').ForwardRefExoticComponent<ToolbarButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/Toolbar/ToolbarButtonLink.d.ts

@@ -0,0 +1,43 @@
+import { ButtonLinkProps } from '../ButtonLink';
+import { ToolbarItemAppearance, WithAriaLabelEnforcement } from './types';
+import { DataTrackingId } from '../../types';
+/**
+ * Base props for the ToolbarButtonLink component
+ * @extends Omit<ButtonLinkProps, "appearance" | "aria-label" | "children">
+ */
+type ToolbarButtonLinkBaseProps = Omit<ButtonLinkProps, "appearance" | "aria-label" | "children"> & {
+    /**
+     * Visual appearance of the button link
+     * @default ghost
+     */
+    appearance?: ToolbarItemAppearance;
+};
+/**
+ * Props for the ToolbarButtonLink component
+ * @extends WithAriaLabelEnforcement<ToolbarButtonLinkBaseProps>
+ */
+export type ToolbarButtonLinkProps = WithAriaLabelEnforcement<ToolbarButtonLinkBaseProps> & DataTrackingId;
+/**
+ * ToolbarButtonLink component for link actions within a toolbar.
+ *
+ * Features:
+ * - Link functionality with href support
+ * - Designed specifically for toolbar integration
+ * - Consistent styling with other toolbar items
+ * - Automatic tooltip for icon-only links
+ * - Overflow menu support
+ * - Accessibility enforcement for aria-labels
+ * - Small size optimized for toolbar layout
+ * - Ghost and primary appearance options
+ * - Proper anchor element semantics
+ *
+ * @example
+ * <ToolbarButtonLink href="/help">
+ *   Help
+ * </ToolbarButtonLink>
+ *
+ * @example
+ * <ToolbarButtonLink icon={ExternalLinkIcon} href="/docs" aria-label="Documentation" />
+ */
+export declare const ToolbarButtonLink: import('react').ForwardRefExoticComponent<ToolbarButtonLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
+export {};

package/dist/components/Toolbar/ToolbarButtonToggle.d.ts

@@ -0,0 +1,37 @@
+import { ButtonToggleProps } from '../ButtonToggle';
+import { WithAriaLabelEnforcement } from './types';
+import { DataTrackingId } from '../../types';
+/**
+ * Base props for the ToolbarButtonToggle component
+ * @extends Omit<ButtonToggleProps, "aria-label" | "children">
+ */
+type ToolbarButtonToggleBaseProps = Omit<ButtonToggleProps, "aria-label" | "children">;
+/**
+ * Props for the ToolbarButtonToggle component
+ * @extends WithAriaLabelEnforcement<ToolbarButtonToggleBaseProps>
+ */
+export type ToolbarButtonToggleProps = WithAriaLabelEnforcement<ToolbarButtonToggleBaseProps> & DataTrackingId;
+/**
+ * ToolbarButtonToggle component for toggleable actions within a toolbar.
+ *
+ * Features:
+ * - Toggle state management (on/off)
+ * - Designed specifically for toolbar integration
+ * - Consistent styling with other toolbar items
+ * - Automatic tooltip for icon-only toggles
+ * - Overflow menu support
+ * - Accessibility enforcement for aria-labels
+ * - Small size optimized for toolbar layout
+ * - Visual feedback for toggle state
+ * - Proper ARIA attributes for toggle semantics
+ *
+ * @example
+ * <ToolbarButtonToggle icon={BoldIcon} aria-label="Bold" checked={isBold} />
+ *
+ * @example
+ * <ToolbarButtonToggle checked={isItalic}>
+ *   Italic
+ * </ToolbarButtonToggle>
+ */
+export declare const ToolbarButtonToggle: import('react').ForwardRefExoticComponent<ToolbarButtonToggleProps & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/Toolbar/ToolbarSelect.d.ts

@@ -0,0 +1,108 @@
+import { ListboxItemType } from '../Listbox';
+import { default as Popover } from '../Popover';
+import { ToolbarItemAppearance } from './types';
+import { DataTrackingId } from '../../types';
+/**
+ * Type for items in the ToolbarSelect dropdown
+ * @extends ItemType<T & { id: string }>
+ */
+type ToolbarSelectItem<T = Record<string, unknown>> = ListboxItemType<T & {
+    id: string;
+}>;
+/**
+ * Props for the ToolbarSelect component
+ * @extends Omit<React.ComponentPropsWithoutRef<typeof Popover.Button>, "appearance" | "onChange">
+ */
+export type ToolbarSelectProps<T = Record<string, unknown>> = Omit<React.ComponentPropsWithoutRef<typeof Popover.Button>, "appearance" | "onChange"> & {
+    /**
+     * Visual appearance of the select button
+     * @default ghost
+     */
+    appearance?: ToolbarItemAppearance;
+    /**
+     * Callback function when selection changes
+     */
+    onChange?: (optionId: string) => void;
+    /**
+     * Currently selected item ID (controlled mode)
+     */
+    selected?: string;
+    /**
+     * Array of selectable items
+     */
+    items: ToolbarSelectItem<T>[];
+    /**
+     * Accessible label for the select component
+     */
+    accessibleLabel: string;
+} & DataTrackingId;
+/**
+ * ToolbarSelect component provides a dropdown selector within a toolbar.
+ *
+ * Features:
+ * - Dropdown menu with selectable options
+ * - Controlled and uncontrolled usage patterns
+ * - Automatic overflow menu integration
+ * - Accessibility support with proper ARIA labels
+ * - Small size optimized for toolbar layout
+ * - Ghost and primary appearance options
+ * - Dropdown arrow icon indicator
+ * - Listbox integration for keyboard navigation
+ *
+ * @example
+ * <ToolbarSelect
+ *   items={fontOptions}
+ *   selected="arial"
+ *   accessibleLabel="Font family"
+ *   onChange={(id) => setFont(id)}
+ * />
+ *
+ * @example
+ * <ToolbarSelect
+ *   appearance="primary"
+ *   items={colorOptions}
+ *   accessibleLabel="Text color"
+ * />
+ */
+export declare const ToolbarSelect: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & import('..').LayoutUtilProps & {
+    appearance?: import('../..').ButtonAppearance;
+    size?: Extract<import('../..').Size, "small" | "medium" | "large">;
+    loading?: boolean;
+} & {
+    children?: import('react').ComponentPropsWithoutRef<"button">["children"];
+    icon?: import('..').IconProps["svg"] | {
+        after: import('..').IconProps["svg"];
+    } | {
+        before: import('..').IconProps["svg"];
+    };
+} & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & import('..').LayoutUtilProps & {
+    appearance?: import('../..').ButtonAppearance;
+    size?: Extract<import('../..').Size, "small" | "medium" | "large">;
+    loading?: boolean;
+} & {
+    children?: never;
+    icon?: import('..').IconProps["svg"];
+} & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>, "ref">, "onChange" | "appearance"> & {
+    /**
+     * Visual appearance of the select button
+     * @default ghost
+     */
+    appearance?: ToolbarItemAppearance;
+    /**
+     * Callback function when selection changes
+     */
+    onChange?: (optionId: string) => void;
+    /**
+     * Currently selected item ID (controlled mode)
+     */
+    selected?: string;
+    /**
+     * Array of selectable items
+     */
+    items: ToolbarSelectItem<Record<string, unknown>>[];
+    /**
+     * Accessible label for the select component
+     */
+    accessibleLabel: string;
+} & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -1,2 +1,7 @@
 export * from './Toolbar';
-export { Toolbar as default } from './Toolbar';
+export { Toolbar as default, type ToolbarProps } from './Toolbar';
+export { ToolbarButton, type ToolbarButtonProps } from './ToolbarButton';
+export { ToolbarButtonToggle, type ToolbarButtonToggleProps, } from './ToolbarButtonToggle';
+export { ToolbarButtonLink, type ToolbarButtonLinkProps, } from './ToolbarButtonLink';
+export { ToolbarSelect, type ToolbarSelectProps } from './ToolbarSelect';
+export { type ToolbarItemAppearance, type ToolbarOverflowTypes } from './types';

package/dist/components/Toolbar/internal/ToolbarItemOverflowContext.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Context for denoting if the current item is rendered in the overflow menu
+ */
+type OverflowItemContextType = {
+    /**
+     * Whether the current item is rendered inside the overflow menu
+     */
+    isInOverflowMenu: boolean;
+};
+/**
+ * Context for managing overflow menu state
+ */
+export declare const OverflowItemContext: import('react').Context<OverflowItemContextType>;
+/**
+ * Hook for accessing overflow menu context
+ * @returns OverflowItemContextType - The overflow menu context
+ */
+export declare const useOverFlowItemContext: () => OverflowItemContextType;
+export {};

package/dist/components/Toolbar/internal/ToolbarItemWrapper.d.ts

@@ -0,0 +1,33 @@
+import { ToolbarItemProps } from '../types';
+/**
+ * Props for the ToolbarItemWrapper component
+ */
+type ToolbarItemWrapperProps = {
+    /**
+     * Toolbar item configuration without ID (ID is generated internally)
+     */
+    item: Omit<ToolbarItemProps, "id">;
+    /**
+     * The toolbar item component to wrap
+     */
+    children: React.ReactNode;
+};
+/**
+ * ToolbarItemWrapper manages item visibility and focus behavior within a toolbar.
+ *
+ * Features:
+ * - Intersection observation for overflow detection
+ * - Automatic overflow menu integration in collapse mode
+ * - Focus management and keyboard navigation
+ * - ARIA compliance for accessibility
+ * - Visibility state management
+ * - Proper tab index handling
+ * - Context integration with toolbar state
+ *
+ * @example
+ * <ToolbarItemWrapper item={{ itemType: "button", itemProps: buttonProps }}>
+ *   <ToolbarButton {...buttonProps} />
+ * </ToolbarItemWrapper>
+ */
+export declare const ToolbarItemWrapper: ({ item, children, }: ToolbarItemWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export type { ToolbarItemWrapperProps };

package/dist/components/Toolbar/internal/ToolbarOverflowContext.d.ts

@@ -0,0 +1,35 @@
+import { RefObject } from 'react';
+import { ToolbarItemProps, ToolbarOverflowTypes } from '../types';
+/**
+ * Context for sharing toolbar state with child components for overflow handling
+ */
+export type ToolbarOverFlowContextProps = {
+    /**
+     * Array of toolbar items that should appear in the overflow menu
+     */
+    overflowItems: ToolbarItemProps[];
+    /**
+     * Function to add an item to the overflow menu
+     */
+    addItem: (element: ToolbarItemProps) => void;
+    /**
+     * Function to remove an item from the overflow menu
+     */
+    removeItem: (element: ToolbarItemProps) => void;
+    /**
+     * Reference to the toolbar container element
+     */
+    toolbarRef: RefObject<HTMLDivElement>;
+    /**
+     * Array of item IDs in their original order
+     */
+    orderedIds?: string[];
+    /**
+     * Overflow behavior type (wrap or collapse)
+     */
+    overflow: ToolbarOverflowTypes;
+};
+/**
+ * Context for managing toolbar overflow state and operations
+ */
+export declare const ToolbarOverflowContext: import('react').Context<ToolbarOverFlowContextProps>;

package/dist/components/Toolbar/internal/ToolbarOverflowMenu.d.ts

@@ -0,0 +1,29 @@
+import { ReactElement } from 'react';
+/**
+ * Props for the ToolbarOverflowMenu component
+ */
+export type ToolbarOverflowMenuProps = {
+    /**
+     * Additional items to display in the overflow menu
+     */
+    additionalItems?: ReactElement[];
+    /**
+     * Direction of the parent toolbar
+     * @default horizontal
+     */
+    direction?: "vertical" | "horizontal";
+};
+/**
+ * ToolbarOverflowMenu component displays toolbar items that don't fit in the main toolbar.
+ *
+ * Features:
+ * - Automatic rendering when items overflow in collapse mode
+ * - Maintains consistent item ordering with the main toolbar
+ * - Preserves item state between toolbar and overflow menu
+ * - Provides accessible navigation with keyboard and screen readers
+ * - Adapts to both horizontal and vertical toolbar layouts
+ * - Context-aware rendering for child components
+ * - Proper ARIA menu semantics
+ * - Keyboard navigation support
+ */
+export declare const ToolbarOverflowMenu: ({ additionalItems, direction, }: ToolbarOverflowMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Toolbar/internal/utils/accessibility.d.ts

@@ -0,0 +1,21 @@
+import { KeyboardEvent } from 'react';
+/**
+ * Updates tabindex values for all items in a toolbar.
+ * Sets tabindex="0" for the active item and tabindex="-1" for all others.
+ */
+export declare function updateToolbarItemsTabIndex(toolbarElement: HTMLElement, activeItem?: Element | number): Element | undefined;
+/**
+ * Handles keyboard navigation within the toolbar component following ARIA practices.
+ *
+ * Navigation behavior:
+ * - Left/Right arrows move focus in horizontal toolbars
+ * - Up/Down arrows move focus in vertical toolbars
+ * - Home/End move to first/last items
+ * - Navigation wraps around at the ends
+ * - Only visible items are included in navigation
+ */
+export declare function handleToolbarKeyDown(event: KeyboardEvent<HTMLElement>, toolbarElement: HTMLElement): void;
+/**
+ * Handles keyboard navigation within overflow menu using arrow keys
+ */
+export declare const handleMenuKeyboardNavigation: (event: KeyboardEvent<HTMLUListElement>) => void;