@papernote/ui/dist/components/FloatingActionButton.d.ts

A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive

import React from 'react';
/**
 * Action item for FAB menu
 */
export interface FABAction {
    /** Unique identifier */
    id: string;
    /** Icon for the action */
    icon: React.ReactNode;
    /** Label text (shown on hover/long-press) */
    label: string;
    /** Click handler */
    onClick: () => void;
    /** Disabled state */
    disabled?: boolean;
}
/**
 * FloatingActionButton component props
 */
export interface FloatingActionButtonProps {
    /** Primary action when FAB is clicked (without menu) */
    onClick?: () => void;
    /** Icon for the FAB - defaults to Plus */
    icon?: React.ReactNode;
    /** Secondary actions shown in menu */
    actions?: FABAction[];
    /** Position on screen */
    position?: 'bottom-right' | 'bottom-left' | 'bottom-center';
    /** Color variant */
    variant?: 'primary' | 'secondary' | 'accent';
    /** Size */
    size?: 'md' | 'lg';
    /** Accessible label */
    label?: string;
    /** Extended FAB with text label */
    extended?: boolean;
    /** Text for extended FAB */
    extendedLabel?: string;
    /** Hide FAB (useful for scroll-based show/hide) */
    hidden?: boolean;
    /** Custom offset from edge (in pixels) */
    offset?: {
        x?: number;
        y?: number;
    };
    /** Additional class names */
    className?: string;
}
/**
 * FloatingActionButton - Material Design style FAB for mobile
 *
 * A prominent button for the primary action on a screen.
 * Supports single action or expandable menu with multiple actions.
 *
 * @example Simple FAB
 * ```tsx
 * <FloatingActionButton
 *   onClick={() => openCreateModal()}
 *   label="Create new item"
 * />
 * ```
 *
 * @example FAB with action menu
 * ```tsx
 * <FloatingActionButton
 *   actions={[
 *     { id: 'photo', icon: <Camera />, label: 'Take Photo', onClick: takePhoto },
 *     { id: 'upload', icon: <Upload />, label: 'Upload File', onClick: uploadFile },
 *     { id: 'note', icon: <FileText />, label: 'Create Note', onClick: createNote },
 *   ]}
 * />
 * ```
 *
 * @example Extended FAB
 * ```tsx
 * <FloatingActionButton
 *   extended
 *   extendedLabel="New Task"
 *   icon={<Plus />}
 *   onClick={createTask}
 * />
 * ```
 */
export default function FloatingActionButton({ onClick, icon, actions, position, variant, size, label, extended, extendedLabel, hidden, offset, className, }: FloatingActionButtonProps): React.ReactPortal;
/**
 * Hook for scroll-based FAB visibility
 *
 * @example
 * ```tsx
 * const { hidden, scrollDirection } = useFABScroll();
 * <FloatingActionButton hidden={hidden} />
 * ```
 */
export declare function useFABScroll(threshold?: number): {
    hidden: boolean;
    scrollDirection: 'up' | 'down' | null;
};
//# sourceMappingURL=FloatingActionButton.d.ts.map