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

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

import { ReactNode } from 'react';
export interface ActionBarAction {
    /** Unique identifier for the action */
    id: string;
    /** Button label text */
    label: string;
    /** Icon to display (from lucide-react) */
    icon?: ReactNode;
    /** Click handler */
    onClick: () => void;
    /** Button variant */
    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline';
    /** Disabled state */
    disabled?: boolean;
    /** Loading state */
    loading?: boolean;
}
export interface ActionBarProps {
    /** Content to display on the left side (e.g., selection count, status text) */
    leftContent?: ReactNode;
    /** Content to display in the center */
    centerContent?: ReactNode;
    /** Content to display on the right side (overrides actions) */
    rightContent?: ReactNode;
    /** Action buttons to display on the right */
    actions?: ActionBarAction[];
    /** Position of the action bar */
    position?: 'top' | 'bottom';
    /** Make the bar sticky */
    sticky?: boolean;
    /** Show the action bar (useful for conditional display like bulk selection) */
    visible?: boolean;
    /** Callback when close/dismiss button is clicked */
    onDismiss?: () => void;
    /** Show dismiss button */
    showDismiss?: boolean;
    /** Additional CSS classes */
    className?: string;
    /** Background variant */
    variant?: 'default' | 'primary' | 'warning' | 'info';
    /** Compact mode with less padding */
    compact?: boolean;
}
/**
 * ActionBar - Flexible toolbar for page-level and contextual actions
 *
 * A versatile action container that can be used for:
 * - Bulk actions when rows are selected
 * - Page-level actions and controls
 * - Form action buttons (Save/Cancel)
 * - Contextual toolbars
 *
 * @example Basic bulk actions bar
 * ```tsx
 * <ActionBar
 *   visible={selectedIds.length > 0}
 *   leftContent={<Text weight="medium">{selectedIds.length} selected</Text>}
 *   actions={[
 *     { id: 'export', label: 'Export', icon: <Download />, onClick: handleExport },
 *     { id: 'delete', label: 'Delete', icon: <Trash />, onClick: handleDelete, variant: 'danger' },
 *   ]}
 *   onDismiss={() => setSelectedIds([])}
 *   showDismiss
 * />
 * ```
 *
 * @example Sticky bottom form actions
 * ```tsx
 * <ActionBar
 *   position="bottom"
 *   sticky
 *   rightContent={
 *     <>
 *       <Button variant="ghost" onClick={handleCancel}>Cancel</Button>
 *       <Button variant="primary" onClick={handleSave} loading={isSaving}>Save Changes</Button>
 *     </>
 *   }
 * />
 * ```
 *
 * @example Info bar with center content
 * ```tsx
 * <ActionBar
 *   variant="info"
 *   centerContent={
 *     <Text size="sm">Showing results for "search term" - 42 items found</Text>
 *   }
 *   onDismiss={clearSearch}
 *   showDismiss
 * />
 * ```
 */
export default function ActionBar({ leftContent, centerContent, rightContent, actions, position, sticky, visible, onDismiss, showDismiss, className, variant, compact, }: ActionBarProps): import("react/jsx-runtime").JSX.Element | null;
/**
 * ActionBar.Left - Semantic wrapper for left content
 */
export declare function ActionBarLeft({ children }: {
    children: ReactNode;
}): import("react/jsx-runtime").JSX.Element;
/**
 * ActionBar.Center - Semantic wrapper for center content
 */
export declare function ActionBarCenter({ children }: {
    children: ReactNode;
}): import("react/jsx-runtime").JSX.Element;
/**
 * ActionBar.Right - Semantic wrapper for right content
 */
export declare function ActionBarRight({ children }: {
    children: ReactNode;
}): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=ActionBar.d.ts.map