@payfit/unity-components/dist/esm/components/floating-action-bar/FloatingActionBar.d.ts

import { ReactElement, RefObject } from 'react';
export declare const floatingActionBar: import('tailwind-variants').TVReturnType<{
    isHidden: {
        true: string;
        false: string;
    };
    reduceMotion: {
        true: string;
        false: string;
    };
}, undefined, string[], {
    isHidden: {
        true: string;
        false: string;
    };
    reduceMotion: {
        true: string;
        false: string;
    };
}, undefined, import('tailwind-variants').TVReturnType<{
    isHidden: {
        true: string;
        false: string;
    };
    reduceMotion: {
        true: string;
        false: string;
    };
}, undefined, string[], unknown, unknown, undefined>>;
export interface FloatingActionBarProps {
    /**
     * Accessible label for the toolbar.
     * @default "Page actions"
     */
    'aria-label'?: string;
    /**
     * 1 to 3 action buttons. Exceeding 3 is a type error and triggers a
     * runtime warning in development.
     */
    children: ReactElement | [ReactElement, ReactElement] | [ReactElement, ReactElement, ReactElement];
    /**
     * Optional explicit scroll container ref. If omitted, the component
     * auto-detects the nearest scrollable ancestor.
     */
    scrollContainerRef?: RefObject<Element | null>;
}
/**
 * `FloatingActionBar` renders a fixed-bottom action bar on mobile viewports (`xs` and `sm`).
 * On `md` and larger breakpoints the component renders `null`.
 * The bar hides when the user scrolls down and reappears when they scroll up.
 * It always snaps back into view when the user reaches the bottom of the page,
 * ensuring actions are accessible regardless of scroll position.
 * When placed inside a `Page` component, the page automatically adds bottom padding
 * via `:has([data-unity-fab])` so content is never hidden behind the bar.
 * When `prefers-reduced-motion: reduce` is active, the bar stays always visible and
 * no CSS transitions are applied.
 * @param props.aria-label - Accessible label for the toolbar. Announced by screen readers
 *   when the FAB receives focus. Defaults to `"Page actions"`.
 * @param props.children - 1 to 3 `Button` components rendered full-width and stacked
 *   vertically. Passing more than 3 is a TypeScript type error.
 * @param props.scrollContainerRef - Optional explicit scroll container ref. If omitted,
 *   the component auto-detects the nearest scrollable ancestor.
 * @example
 * ```tsx
 * // Single primary action
 * <FloatingActionBar aria-label="Page actions">
 *   <Button variant="primary" size="full">Request leave</Button>
 * </FloatingActionBar>
 *
 * // Two stacked actions
 * <FloatingActionBar aria-label="Page actions">
 *   <Button variant="primary" size="full">Save changes</Button>
 *   <Button variant="secondary" size="full">Cancel</Button>
 * </FloatingActionBar>
 * ```
 * @remarks
 * - Always provide an `aria-label` that describes the toolbar's purpose to screen reader users.
 * - Buttons passed as children should use `size="full"` to fill the available width.
 * - Place the component as the last child of a `Page` to get automatic bottom-padding.
 * - For a custom scroll container (e.g. a modal body), pass a `scrollContainerRef` to
 *   opt out of ancestor auto-detection.
 * @see {@link FloatingActionBarProps} for all available props
 * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/floating-action-bar GitHub}
 * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-floatingactionbar--docs unity-components.payfit.io}
 */
declare const FloatingActionBar: import('react').ForwardRefExoticComponent<FloatingActionBarProps & import('react').RefAttributes<HTMLDivElement>>;
export { FloatingActionBar };