@almadar/ui 2.14.0 → 2.15.0

package/dist/components/molecules/Card.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Card Component
+ *
+ * A generic card container for displaying content with optional title,
+ * subtitle, and action buttons.
+ *
+ * @generated by Orbital Compiler
+ */
+import React from "react";
+export interface CardAction {
+    label: string;
+    onClick?: () => void;
+    /** Event name to emit when clicked (for trait state machine integration) */
+    event?: string;
+    variant?: "default" | "primary" | "danger";
+    icon?: string;
+    disabled?: boolean;
+}
+export interface CardProps {
+    /** Card title */
+    title?: string;
+    /** Card subtitle or description */
+    subtitle?: string;
+    /** Image URL to display at top of card */
+    image?: string;
+    /** Action buttons to display in card footer */
+    actions?: CardAction[];
+    /** Card content */
+    children?: React.ReactNode;
+    /** Click handler for the entire card */
+    onClick?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Declarative event name — emits UI:{action} via eventBus on card click */
+    action?: string;
+    /** Whether the card is selected (highlighted state) */
+    isSelected?: boolean;
+    /** Card name (alias for title) */
+    name?: string;
+    /** Level indicator */
+    level?: number;
+    /** Maximum level */
+    maxLevel?: number;
+    /** Event emitted on long press: UI:{longPressEvent} */
+    longPressEvent?: string;
+    /** Additional payload for long-press events */
+    longPressPayload?: Record<string, unknown>;
+}
+/**
+ * Card component for displaying content in a contained box
+ */
+export declare function Card({ title, subtitle, image, actions, children, onClick, className, action, longPressEvent, longPressPayload, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Card {
+    var displayName: string;
+}
+export default Card;

package/dist/components/molecules/Carousel.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Carousel Molecule Component
+ *
+ * Horizontal scrolling container with snap points, swipe gestures,
+ * prev/next arrow buttons, and dot indicators.
+ * Pure UI molecule with no entity binding.
+ */
+import React from 'react';
+export interface CarouselProps<T = Record<string, unknown>> {
+    /** Array of items to display as slides */
+    items: T[];
+    /** Render function for each slide */
+    renderItem: (item: T, index: number) => React.ReactNode;
+    /** Enable auto-play rotation */
+    autoPlay?: boolean;
+    /** Auto-play interval in milliseconds (default: 5000) */
+    autoPlayInterval?: number;
+    /** Show dot indicators */
+    showDots?: boolean;
+    /** Show prev/next arrow buttons */
+    showArrows?: boolean;
+    /** Enable infinite loop */
+    loop?: boolean;
+    /** Declarative event name for slide change */
+    slideChangeEvent?: string;
+    /** Payload to include with the slide change event */
+    slideChangePayload?: Record<string, unknown>;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const Carousel: <T = Record<string, unknown>>({ items, renderItem, autoPlay, autoPlayInterval, showDots, showArrows, loop, slideChangeEvent, slideChangePayload, className, }: CarouselProps<T>) => React.ReactElement | null;

package/dist/components/molecules/ChartLegend.d.ts

@@ -0,0 +1,20 @@
+/**
+ * ChartLegend Molecule Component
+ *
+ * Color-coded legend for chart data series.
+ * Pure UI molecule with no entity binding.
+ */
+import React from 'react';
+export interface ChartLegendItem {
+    label: string;
+    color: string;
+}
+export interface ChartLegendProps {
+    /** Legend items with label and color */
+    items: ChartLegendItem[];
+    /** Additional CSS classes */
+    className?: string;
+    /** Layout direction */
+    direction?: 'horizontal' | 'vertical';
+}
+export declare const ChartLegend: React.FC<ChartLegendProps>;

package/dist/components/molecules/Container.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Container Component
+ *
+ * A max-width wrapper that centers content horizontally.
+ * Essential for controlling page width and maintaining consistent margins.
+ */
+import React from 'react';
+export type ContainerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+export type ContainerPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+export interface ContainerProps {
+    /** Maximum width */
+    size?: ContainerSize;
+    /** Alias for size (pattern compatibility) */
+    maxWidth?: ContainerSize;
+    /** Horizontal padding */
+    padding?: ContainerPadding;
+    /** Center horizontally */
+    center?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Children elements */
+    children?: React.ReactNode;
+    /** HTML element to render as */
+    as?: React.ElementType;
+}
+/**
+ * Container - Centers and constrains content width
+ */
+export declare const Container: React.FC<ContainerProps>;
+export default Container;

package/dist/components/molecules/DataGrid.d.ts

@@ -0,0 +1,75 @@
+/**
+ * DataGrid Molecule
+ *
+ * A simplified, schema-driven card grid for iterating over entity data.
+ * Extracted from the CardGrid organism with all complexity removed:
+ * no built-in search, sort, filter, pagination, selection, or bulk actions.
+ *
+ * Accepts `fields` config for per-field rendering control (icon, variant, format)
+ * and `itemActions` for per-item event bus wiring.
+ *
+ * Uses atoms only internally: Box, VStack, HStack, Typography, Badge, Button, Icon.
+ */
+import React from 'react';
+export interface DataGridField {
+    /** Entity field name (dot-notation supported) */
+    name: string;
+    /** Display label (auto-generated from name if omitted) */
+    label?: string;
+    /** Lucide icon name to show beside the field */
+    icon?: string;
+    /** Rendering variant: 'h3' for title, 'body' for text, 'caption' for small,
+     *  'badge' for status badge, 'progress' for progress display */
+    variant?: 'h3' | 'h4' | 'body' | 'caption' | 'badge' | 'small' | 'progress';
+    /** Optional format function name: 'date', 'currency', 'number', 'boolean' */
+    format?: 'date' | 'currency' | 'number' | 'boolean' | 'percent';
+}
+export interface DataGridItemAction {
+    /** Button label */
+    label: string;
+    /** Event name to emit (dispatched as UI:{event} with { row: itemData }) */
+    event: string;
+    /** Lucide icon name */
+    icon?: string;
+    /** Button variant */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+}
+export interface DataGridProps {
+    /** Entity data array */
+    entity: unknown | readonly unknown[];
+    /** Field definitions for rendering each card */
+    fields: readonly DataGridField[];
+    /** Alias for fields (compiler generates `columns` for field definitions) */
+    columns?: readonly DataGridField[];
+    /** Per-item action buttons */
+    itemActions?: readonly DataGridItemAction[];
+    /** Number of columns (uses auto-fit if omitted) */
+    cols?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Gap between cards */
+    gap?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Minimum card width in pixels (used when cols is not set, default 280) */
+    minCardWidth?: number;
+    /** Additional CSS classes */
+    className?: string;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Error state */
+    error?: Error | null;
+    /** Entity field name containing an image URL for card thumbnails */
+    imageField?: string;
+    /** Enable multi-select with checkboxes */
+    selectable?: boolean;
+    /** Selection change event name (emits UI:{selectionEvent} with { selectedIds: string[] }) */
+    selectionEvent?: string;
+    /** Enable infinite scroll loading */
+    infiniteScroll?: boolean;
+    /** Event emitted when more items needed: UI:{loadMoreEvent} */
+    loadMoreEvent?: string;
+    /** Whether more items are available for infinite scroll */
+    hasMore?: boolean;
+    /** Render prop for custom per-item content. When provided, `fields` and `itemActions` are ignored. */
+    children?: (item: Record<string, unknown>, index: number) => React.ReactNode;
+    /** Max items to show before "Show More" button. Defaults to 0 (disabled). */
+    pageSize?: number;
+}
+export declare const DataGrid: React.FC<DataGridProps>;

package/dist/components/molecules/DataList.d.ts

@@ -0,0 +1,95 @@
+/**
+ * DataList Molecule
+ *
+ * A simplified, schema-driven list for iterating over entity data.
+ * Extracted from the List organism with all complexity removed:
+ * no built-in search, sort, filter, selection, bulk actions, or custom renderers.
+ *
+ * Accepts `fields` config for per-field rendering control (icon, variant, format)
+ * and `itemActions` for per-item event bus wiring.
+ *
+ * Uses atoms only internally: Box, VStack, HStack, Typography, Badge, Button, Icon.
+ */
+import React from 'react';
+export interface DataListField {
+    /** Entity field name (dot-notation supported) */
+    name: string;
+    /** Display label (auto-generated from name if omitted) */
+    label?: string;
+    /** Lucide icon name to show beside the field */
+    icon?: string;
+    /** Rendering variant: 'h3'/'h4' for title, 'body' for text, 'caption' for small,
+     *  'badge' for status badge, 'progress' for progress bar */
+    variant?: 'h3' | 'h4' | 'body' | 'caption' | 'badge' | 'small' | 'progress';
+    /** Optional format: 'date', 'currency', 'number', 'boolean', 'percent' */
+    format?: 'date' | 'currency' | 'number' | 'boolean' | 'percent';
+}
+export interface DataListItemAction {
+    /** Button label */
+    label: string;
+    /** Event name to emit (dispatched as UI:{event} with { id, row: itemData }) */
+    event: string;
+    /** Lucide icon name */
+    icon?: string;
+    /** Button variant */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+}
+export interface DataListProps {
+    /** Entity data array */
+    entity: unknown | readonly unknown[];
+    /** Field definitions for rendering each row */
+    fields: readonly DataListField[];
+    /** Alias for fields (compiler may generate `columns` for field definitions) */
+    columns?: readonly DataListField[];
+    /** Per-item action buttons */
+    itemActions?: readonly DataListItemAction[];
+    /** Gap between rows */
+    gap?: 'none' | 'sm' | 'md' | 'lg';
+    /** Visual variant */
+    variant?: 'default' | 'card' | 'compact' | 'message';
+    /** Group items by a field value (renders section headers between groups) */
+    groupBy?: string;
+    /** Field name identifying the sender (used with variant: "message") */
+    senderField?: string;
+    /** Current user identifier; messages matching this value align right (used with variant: "message") */
+    currentUser?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Error state */
+    error?: Error | null;
+    /** Enable drag-to-reorder with grip handles */
+    reorderable?: boolean;
+    /** Event emitted on reorder: UI:{reorderEvent} with { fromIndex, toIndex } */
+    reorderEvent?: string;
+    /** Event emitted on left swipe: UI:{swipeLeftEvent} with { row } */
+    swipeLeftEvent?: string;
+    /** Actions revealed on left swipe */
+    swipeLeftActions?: readonly {
+        label: string;
+        icon?: string;
+        variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+    }[];
+    /** Event emitted on right swipe: UI:{swipeRightEvent} with { row } */
+    swipeRightEvent?: string;
+    /** Actions revealed on right swipe */
+    swipeRightActions?: readonly {
+        label: string;
+        icon?: string;
+        variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+    }[];
+    /** Event emitted on long press: UI:{longPressEvent} with { row } */
+    longPressEvent?: string;
+    /** Enable infinite scroll loading */
+    infiniteScroll?: boolean;
+    /** Event emitted when more items needed: UI:{loadMoreEvent} */
+    loadMoreEvent?: string;
+    /** Whether more items are available for infinite scroll */
+    hasMore?: boolean;
+    /** Render prop for custom per-item content. When provided, `fields` and `itemActions` are ignored. */
+    children?: (item: Record<string, unknown>, index: number) => React.ReactNode;
+    /** Max items to show before "Show More" button. Defaults to 5. Set to 0 to disable. */
+    pageSize?: number;
+}
+export declare const DataList: React.FC<DataListProps>;

package/dist/components/molecules/DateRangeSelector.d.ts

@@ -0,0 +1,22 @@
+/**
+ * DateRangeSelector Molecule Component
+ *
+ * Button group for selecting time range periods.
+ * Pure UI molecule with no entity binding.
+ */
+import React from 'react';
+export interface DateRangeSelectorOption {
+    label: string;
+    value: string;
+}
+export interface DateRangeSelectorProps {
+    /** Available range options */
+    options?: DateRangeSelectorOption[];
+    /** Currently selected value */
+    selected?: string;
+    /** Callback when a range is selected */
+    onSelect?: (value: string) => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const DateRangeSelector: React.FC<DateRangeSelectorProps>;

package/dist/components/molecules/Drawer.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Drawer Molecule Component
+ *
+ * A slide-in drawer component for displaying secondary content.
+ * Used by the UI Slot system for render_ui effects targeting the drawer slot.
+ *
+ * Features:
+ * - Left/right positioning
+ * - Configurable width
+ * - Overlay backdrop
+ * - Click-outside to dismiss
+ * - Slide animation
+ * - Escape key to close
+ *
+ * @packageDocumentation
+ */
+import React from "react";
+export type DrawerPosition = "left" | "right";
+export type DrawerSize = "sm" | "md" | "lg" | "xl" | "full";
+export interface DrawerProps {
+    /** Whether the drawer is open (defaults to true when rendered by slot wrapper) */
+    isOpen?: boolean;
+    /** Callback when drawer should close (injected by slot wrapper) */
+    onClose?: () => void;
+    /** Drawer title */
+    title?: string;
+    /** Drawer content (can be empty if using slot content) */
+    children?: React.ReactNode;
+    /** Footer content */
+    footer?: React.ReactNode;
+    /** Position (left or right) */
+    position?: DrawerPosition;
+    /** Width (CSS value or preset size) */
+    width?: string | DrawerSize;
+    /** Show close button */
+    showCloseButton?: boolean;
+    /** Close on overlay click */
+    closeOnOverlayClick?: boolean;
+    /** Close on escape key */
+    closeOnEscape?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Declarative close event — emits UI:{closeEvent} via eventBus when drawer should close */
+    closeEvent?: string;
+}
+export declare const Drawer: React.FC<DrawerProps>;

package/dist/components/molecules/EmptyState.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { LucideIcon } from "lucide-react";
+export interface EmptyStateProps {
+    /**
+     * Icon to display. Accepts either:
+     * - A Lucide icon component (LucideIcon)
+     * - A string icon name (e.g., "check-circle", "x-circle")
+     */
+    icon?: LucideIcon | string;
+    /** Primary text to display - use title or message (message is alias for backwards compat) */
+    title?: string;
+    /** Alias for title - used by schema patterns */
+    message?: string;
+    description?: string;
+    actionLabel?: string;
+    onAction?: () => void;
+    className?: string;
+    /** Destructive styling for confirmation dialogs */
+    destructive?: boolean;
+    /** Variant for color styling */
+    variant?: "default" | "success" | "error" | "warning" | "info";
+    /** Declarative action event — emits UI:{actionEvent} via eventBus when action button is clicked */
+    actionEvent?: string;
+}
+export declare const EmptyState: React.FC<EmptyStateProps>;

package/dist/components/molecules/ErrorBoundary.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import type { ReactNode, ErrorInfo } from 'react';
+export interface ErrorBoundaryProps {
+    /** Content to render when no error */
+    children: ReactNode;
+    /** Fallback UI when an error is caught — ReactNode or render function */
+    fallback?: ReactNode | ((error: Error, reset: () => void) => ReactNode);
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Called when an error is caught (for logging/telemetry) */
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+interface ErrorBoundaryState {
+    error: Error | null;
+}
+/**
+ * ErrorBoundary — catches React render errors in child components.
+ *
+ * Uses `getDerivedStateFromError` and `componentDidCatch` to capture errors
+ * and render a fallback UI. Supports both static ReactNode fallbacks and
+ * render-function fallbacks that receive the error and a reset function.
+ *
+ * @example
+ * ```tsx
+ * // Static fallback
+ * <ErrorBoundary fallback={<Alert variant="error">Something broke</Alert>}>
+ *   <MyComponent />
+ * </ErrorBoundary>
+ *
+ * // Render function fallback with reset
+ * <ErrorBoundary fallback={(error, reset) => (
+ *   <VStack>
+ *     <Typography>Error: {error.message}</Typography>
+ *     <Button onClick={reset}>Try Again</Button>
+ *   </VStack>
+ * )}>
+ *   <MyComponent />
+ * </ErrorBoundary>
+ *
+ * // Default fallback (uses ErrorState molecule)
+ * <ErrorBoundary>
+ *   <MyComponent />
+ * </ErrorBoundary>
+ * ```
+ */
+export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    static displayName: string;
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    private reset;
+    render(): ReactNode;
+    private renderFallback;
+}
+export default ErrorBoundary;

package/dist/components/molecules/ErrorState.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface ErrorStateProps {
+    title?: string;
+    /** Error message to display */
+    message?: string;
+    /** Alias for message (schema compatibility) */
+    description?: string;
+    onRetry?: () => void;
+    className?: string;
+    /** Declarative retry event — emits UI:{retryEvent} via eventBus when retry button is clicked */
+    retryEvent?: string;
+}
+export declare const ErrorState: React.FC<ErrorStateProps>;

package/dist/components/molecules/FilterGroup.d.ts

@@ -0,0 +1,54 @@
+/**
+ * FilterGroup Molecule Component
+ *
+ * A component for filtering entity data. Composes atoms (Button, Select, Badge, HStack)
+ * and follows the design system using CSS variables.
+ *
+ * Implements the Closed Circuit principle:
+ * - FilterGroup updates QuerySingleton filters via query prop
+ * - FilterGroup emits UI:FILTER events for trait state machines
+ * - entity-list/entity-cards read filtered data via query prop
+ *
+ * Supports Query Singleton pattern via `query` prop for std/Filter behavior.
+ */
+import React from "react";
+/** Filter definition from schema */
+export interface FilterDefinition {
+    field: string;
+    label: string;
+    /** Filter type - 'date' renders a date picker, 'date-range'/'daterange' renders two date pickers */
+    filterType?: "select" | "toggle" | "checkbox" | "date" | "daterange" | "date-range";
+    /** Alias for filterType (schema compatibility) */
+    type?: "select" | "toggle" | "checkbox" | "date" | "daterange" | "date-range";
+    /** Options for select/toggle filters */
+    options?: readonly string[];
+}
+export interface FilterGroupProps {
+    /** Entity name to filter */
+    entity: string;
+    /** Filter definitions from schema */
+    filters: readonly FilterDefinition[];
+    /** Callback when a filter changes - for EntityStore integration */
+    onFilterChange?: (field: string, value: string | null) => void;
+    /** Callback to clear all filters */
+    onClearAll?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Variant style */
+    variant?: "default" | "compact" | "pills" | "vertical";
+    /** Show filter icon */
+    showIcon?: boolean;
+    /**
+     * Query singleton binding for state management.
+     * When provided, syncs filter state with the query singleton.
+     * Example: "@TaskQuery"
+     */
+    query?: string;
+    /** Loading state indicator */
+    isLoading?: boolean;
+}
+/**
+ * FilterGroup - Renders filter controls for entity data
+ * Uses atoms: Button, Select, Badge, HStack
+ */
+export declare const FilterGroup: React.FC<FilterGroupProps>;

package/dist/components/molecules/Flex.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Flex Component
+ *
+ * A flexbox wrapper with all common flex properties exposed as props.
+ * More explicit than Stack for when you need full flex control.
+ */
+import React from 'react';
+export type FlexDirection = 'row' | 'row-reverse' | 'col' | 'col-reverse';
+export type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type FlexAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type FlexJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+export type FlexGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export interface FlexProps {
+    /** Flex direction */
+    direction?: FlexDirection;
+    /** Flex wrap */
+    wrap?: FlexWrap;
+    /** Align items */
+    align?: FlexAlign;
+    /** Justify content */
+    justify?: FlexJustify;
+    /** Gap between items */
+    gap?: FlexGap;
+    /** Inline flex */
+    inline?: boolean;
+    /** Flex grow */
+    grow?: boolean | number;
+    /** Flex shrink */
+    shrink?: boolean | number;
+    /** Flex basis */
+    basis?: string | number;
+    /** Custom class name */
+    className?: string;
+    /** Children elements */
+    children: React.ReactNode;
+    /** HTML element to render as */
+    as?: React.ElementType;
+}
+/**
+ * Flex - Full-featured flexbox container
+ */
+export declare const Flex: React.FC<FlexProps>;
+export default Flex;

package/dist/components/molecules/FlipCard.d.ts

@@ -0,0 +1,25 @@
+/**
+ * FlipCard - A two-sided card with 3D flip animation.
+ *
+ * Pure presentational molecule: no entity binding, no event bus, no translations.
+ * Uses the FlipContainer atom for the 3D transform mechanics.
+ */
+import React from 'react';
+export interface FlipCardProps {
+    /** Content rendered on the front face */
+    front: React.ReactNode;
+    /** Content rendered on the back face */
+    back: React.ReactNode;
+    /** Controlled flip state */
+    flipped?: boolean;
+    /** Callback when the card is clicked to flip */
+    onFlip?: () => void;
+    /** Optional className for the outer container */
+    className?: string;
+    /** Card height as a Tailwind class (default: 'h-64') */
+    height?: string;
+}
+export declare const FlipCard: {
+    ({ front, back, flipped, onFlip, className, height, }: FlipCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/molecules/FloatingActionButton.d.ts

@@ -0,0 +1,69 @@
+/**
+ * FloatingActionButton Molecule Component
+ *
+ * A floating action button that can expand into multiple actions vertically.
+ * Uses Button atom.
+ */
+import React from "react";
+import type { LucideIcon } from "lucide-react";
+export interface FloatingAction {
+    /**
+     * Action ID
+     */
+    id: string;
+    /**
+     * Action label
+     */
+    label: string;
+    /**
+     * Action icon
+     */
+    icon: LucideIcon;
+    /**
+     * Action click handler
+     */
+    onClick?: () => void;
+    /** Event name to emit when clicked (for trait state machine integration) */
+    event?: string;
+    /**
+     * Action variant
+     */
+    variant?: "primary" | "secondary" | "success" | "danger" | "warning";
+}
+export interface FloatingActionButtonProps {
+    /**
+     * Single action (if only one action, button will directly trigger onClick)
+     */
+    action?: {
+        icon: LucideIcon;
+        onClick: () => void;
+        label?: string;
+        variant?: "primary" | "secondary" | "success" | "danger" | "warning";
+    };
+    /**
+     * Multiple actions (if provided, button will expand to show all actions)
+     */
+    actions?: FloatingAction[];
+    /**
+     * Icon name (simplified API for pattern compatibility)
+     */
+    icon?: string;
+    /**
+     * Click handler (simplified API for pattern compatibility)
+     */
+    onClick?: () => void;
+    /**
+     * Variant (simplified API for pattern compatibility)
+     */
+    variant?: "primary" | "secondary" | "success" | "danger" | "warning";
+    /**
+     * Button position
+     * @default 'bottom-right'
+     */
+    position?: "bottom-right" | "bottom-left" | "bottom-center" | "top-right" | "top-left" | "top-center" | string;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+export declare const FloatingActionButton: React.FC<FloatingActionButtonProps>;