@almadar/ui 1.0.34 → 2.0.1

package/dist/components/index.js

@@ -1,17 +1,17 @@
+import { DEFAULT_CONFIG, renderStateMachineToDomData, parseContentSegments } from '../chunk-N6DJVKZ6.js';
 import { useAuthContext } from '../chunk-BKC4XU44.js';
 export { ENTITY_EVENTS, useAgentChat, useAuthContext, useCompile, useConnectGitHub, useCreateEntity, useDeepAgentGeneration, useDeleteEntity, useDisconnectGitHub, useEntities, useEntitiesByType, useEntity as useEntityById, useEntityMutations, useExtensions, useFileEditor, useFileSystem, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useInput, useOrbitalHistory, useOrbitalMutations, usePhysics, usePlayer, usePreview, useResolvedEntity, useSelectedEntity, useSendOrbitalEvent, useSingletonEntity, useUIEvents, useUpdateEntity, useValidation } from '../chunk-BKC4XU44.js';
-import { DEFAULT_CONFIG, renderStateMachineToDomData, parseContentSegments } from '../chunk-N6DJVKZ6.js';
 import '../chunk-XSEDIUM6.js';
-import { VStack, HStack, Typography, Button, Icon, Box, Card, Avatar, Badge, SearchInput, Checkbox, Menu as Menu$1, Pagination, LoadingState, EmptyState, Modal, ErrorState, QuizBlock, CodeBlock, ScaledDiagram, MarkdownContent, Divider, ProgressBar, Stack, Drawer, Toast, Tabs, Input, ThemeToggle, HealthBar, ScoreDisplay, StateIndicator, Container, EntityDisplayEvents } from '../chunk-FZJ73RDM.js';
-export { Accordion, Card2 as ActionCard, Alert, Avatar, Badge, Box, Breadcrumb, Button, ButtonGroup, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Center, Checkbox, CodeBlock, ConditionalWrapper, Container, ControlButton, DataTable, DetailPanel, Divider, Drawer, EmptyState, EntityDisplayEvents, ErrorBoundary, ErrorState, FilterGroup, Flex, FloatingActionButton, Form, FormField, FormSectionHeader, Grid, HStack, Heading, HealthBar, Icon, Input, InputGroup, Label, LawReferenceTooltip, LoadingState, MarkdownContent, MasterDetail, Menu, Modal, Overlay, PageHeader, Pagination, Popover, ProgressBar, QuizBlock, Radio, RelationSelect, RepeatableFormSection, ScaledDiagram, ScoreDisplay, SearchInput, Select, SidePanel, SimpleGrid, Skeleton, SlotContentRenderer, Spacer, Spinner, Sprite, Stack, StatCard, StateIndicator, Switch, Tabs, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, Toast, Tooltip, Typography, UISlotComponent, UISlotRenderer, VStack, ViolationAlert, WizardNavigation, WizardProgress, drawSprite } from '../chunk-FZJ73RDM.js';
+import { VStack, HStack, Typography, Button, Icon, Box, Card, Avatar, Badge, SearchInput, Checkbox, Menu as Menu$1, Pagination, LoadingState, EmptyState, Modal, ErrorState, QuizBlock, CodeBlock, ScaledDiagram, MarkdownContent, Divider, ProgressBar, Stack, Drawer, Toast, Tabs, Input, ThemeToggle, HealthBar, ScoreDisplay, StateIndicator, Container, EntityDisplayEvents } from '../chunk-RIZ76XRF.js';
+export { Accordion, Card2 as ActionCard, Alert, Avatar, Badge, Box, Breadcrumb, Button, ButtonGroup, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Center, Checkbox, CodeBlock, ConditionalWrapper, Container, ControlButton, DataTable, DetailPanel, Divider, Drawer, EmptyState, EntityDisplayEvents, ErrorBoundary, ErrorState, FilterGroup, Flex, FloatingActionButton, Form, FormField, FormSectionHeader, Grid, HStack, Heading, HealthBar, Icon, Input, InputGroup, Label, LawReferenceTooltip, LoadingState, MarkdownContent, MasterDetail, Menu, Modal, Overlay, PageHeader, Pagination, Popover, ProgressBar, QuizBlock, Radio, RelationSelect, RepeatableFormSection, ScaledDiagram, ScoreDisplay, SearchInput, Select, SidePanel, SimpleGrid, Skeleton, SlotContentRenderer, Spacer, Spinner, Sprite, Stack, StatCard, StateIndicator, Switch, Tabs, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, Toast, Tooltip, Typography, UISlotComponent, UISlotRenderer, VStack, ViolationAlert, WizardNavigation, WizardProgress, drawSprite } from '../chunk-RIZ76XRF.js';
+import { cn, getNestedValue } from '../chunk-KKCVDUK7.js';
+export { cn } from '../chunk-KKCVDUK7.js';
 import '../chunk-BTXQJGFB.js';
 import { useTranslate } from '../chunk-PE2H3NAW.js';
 export { EntityDataProvider, I18nProvider, createTranslate, entityDataKeys, parseQueryBinding, useEntity, useEntityDataAdapter, useEntityDetail, useEntityList, useEntityListSuspense, useEntitySuspense, useQuerySingleton, useTranslate } from '../chunk-PE2H3NAW.js';
 import { useEventBus, useEventListener } from '../chunk-YXZM3WCF.js';
 export { useEmitEvent, useEventBus, useEventListener } from '../chunk-YXZM3WCF.js';
 export { DEFAULT_SLOTS, useUISlotManager } from '../chunk-7NEWMNNU.js';
-import { cn, getNestedValue } from '../chunk-KKCVDUK7.js';
-export { cn } from '../chunk-KKCVDUK7.js';
 export { clearEntities, getAllEntities, getByType, getEntity, getSingleton, removeEntity, spawnEntity, updateEntity, updateSingleton } from '../chunk-N7MVUW4R.js';
 import { __publicField } from '../chunk-PKBMQBKP.js';
 import * as React25 from 'react';

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

@@ -0,0 +1,67 @@
+/**
+ * Accordion Molecule Component
+ *
+ * A collapsible content component with single or multiple open items.
+ * Uses Button, Icon, Typography, and Divider atoms.
+ */
+import React from "react";
+export interface AccordionItem {
+    /**
+     * Item ID (auto-generated from header/title if not provided)
+     */
+    id?: string;
+    /**
+     * Item header/title
+     */
+    header?: React.ReactNode;
+    /**
+     * Alias for header (pattern compatibility)
+     */
+    title?: React.ReactNode;
+    /**
+     * Item content
+     */
+    content: React.ReactNode;
+    /**
+     * Disable item
+     */
+    disabled?: boolean;
+    /**
+     * Default open state
+     */
+    defaultOpen?: boolean;
+}
+export interface AccordionProps {
+    /**
+     * Accordion items
+     */
+    items: AccordionItem[];
+    /**
+     * Allow multiple items open at once
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Default open items (IDs)
+     */
+    defaultOpenItems?: string[];
+    /**
+     * Default open items by index (pattern compatibility)
+     */
+    defaultOpen?: number[];
+    /**
+     * Controlled open items (IDs)
+     */
+    openItems?: string[];
+    /**
+     * Callback when item opens/closes
+     */
+    onItemToggle?: (itemId: string, isOpen: boolean) => void;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /** Declarative toggle event — emits UI:{toggleEvent} with { itemId, isOpen } */
+    toggleEvent?: string;
+}
+export declare const Accordion: React.FC<AccordionProps>;

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

@@ -0,0 +1,24 @@
+/**
+ * Alert Molecule Component
+ *
+ * A component for displaying alert messages with different variants and actions.
+ * Uses theme-aware CSS variables for styling.
+ */
+import React from "react";
+export type AlertVariant = "info" | "success" | "warning" | "error";
+export interface AlertProps {
+    /** Alert content (children or message) */
+    children?: React.ReactNode;
+    /** Alert message (alias for children) */
+    message?: string;
+    variant?: AlertVariant;
+    title?: string;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    onClose?: () => void;
+    actions?: React.ReactNode;
+    className?: string;
+    /** Declarative dismiss event — emits UI:{dismissEvent} via eventBus when alert is dismissed */
+    dismissEvent?: string;
+}
+export declare const Alert: React.FC<AlertProps>;

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

@@ -0,0 +1,55 @@
+/**
+ * Breadcrumb Molecule Component
+ *
+ * A breadcrumb navigation component with separators and icons.
+ * Uses Button, Icon, and Typography atoms.
+ */
+import React from "react";
+import type { LucideIcon } from "lucide-react";
+export interface BreadcrumbItem {
+    /**
+     * Item label
+     */
+    label: string;
+    /**
+     * Item href (if provided, renders as link)
+     */
+    href?: string;
+    /**
+     * Item path (alias for href, for schema compatibility)
+     */
+    path?: string;
+    /**
+     * Item icon
+     */
+    icon?: LucideIcon;
+    /**
+     * Click handler (if href not provided)
+     */
+    onClick?: () => void;
+    /**
+     * Is current page
+     */
+    isCurrent?: boolean;
+    /** Event name to emit when clicked (for trait state machine integration) */
+    event?: string;
+}
+export interface BreadcrumbProps {
+    /**
+     * Breadcrumb items
+     */
+    items: BreadcrumbItem[];
+    /**
+     * Separator icon
+     */
+    separator?: LucideIcon;
+    /**
+     * Maximum items to show (truncates with ellipsis)
+     */
+    maxItems?: number;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+export declare const Breadcrumb: React.FC<BreadcrumbProps>;

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

@@ -0,0 +1,67 @@
+/**
+ * ButtonGroup Molecule Component
+ *
+ * A component for grouping buttons together with connected styling.
+ * Supports both children-based and form-actions pattern (primary/secondary) usage.
+ * Uses Button atoms.
+ */
+import React from 'react';
+export type ButtonGroupVariant = 'default' | 'segmented' | 'toggle';
+/** Action button config for form-actions pattern */
+export interface ActionButton {
+    label: string;
+    /** Action type - 'submit' renders as submit button, others render as button */
+    actionType?: string;
+    event?: string;
+    navigatesTo?: string;
+    /** Button variant - matches Button component variants. Accepts string for schema compatibility. */
+    variant?: string;
+}
+/** Filter definition for filter-group pattern */
+export interface FilterDefinition {
+    field: string;
+    label: string;
+    /** Filter type (checkbox, select, etc.) */
+    type?: 'checkbox' | 'select' | 'toggle';
+    /** Options for select filters */
+    options?: readonly string[];
+}
+export interface ButtonGroupProps {
+    /**
+     * Button group content (Button components) - use this OR primary/secondary
+     */
+    children?: React.ReactNode;
+    /**
+     * Primary action button config (for form-actions pattern)
+     * Accepts Readonly for compatibility with generated const objects
+     */
+    primary?: Readonly<ActionButton>;
+    /**
+     * Secondary action buttons config (for form-actions pattern)
+     * Accepts readonly array for compatibility with generated const arrays
+     */
+    secondary?: readonly Readonly<ActionButton>[];
+    /**
+     * Visual variant
+     * @default 'default'
+     */
+    variant?: ButtonGroupVariant;
+    /**
+     * Orientation
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Entity type for filter-group pattern (schema metadata)
+     */
+    entity?: string;
+    /**
+     * Filter definitions for filter-group pattern
+     */
+    filters?: readonly FilterDefinition[];
+}
+export declare const ButtonGroup: React.FC<ButtonGroupProps>;

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

@@ -0,0 +1,44 @@
+/**
+ * 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;
+}
+/**
+ * Card component for displaying content in a contained box
+ */
+export declare function Card({ title, subtitle, image, actions, children, onClick, className, action, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Card {
+    var displayName: string;
+}
+export default Card;

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/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/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>;

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

@@ -0,0 +1,16 @@
+/**
+ * FormField Molecule Component
+ *
+ * A form field wrapper with label, hint, and error message support.
+ * **Atomic Design**: Composed using Label and Typography atoms.
+ */
+import React from 'react';
+export interface FormFieldProps {
+    label: string;
+    required?: boolean;
+    error?: string;
+    hint?: string;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare const FormField: React.FC<FormFieldProps>;

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

@@ -0,0 +1,30 @@
+/**
+ * FormSectionHeader
+ *
+ * Header component for collapsible form sections.
+ * Provides consistent styling and interaction for section headers.
+ */
+import React from "react";
+export interface FormSectionHeaderProps {
+    /** Section title */
+    title: string;
+    /** Section subtitle */
+    subtitle?: string;
+    /** Whether section is collapsed */
+    isCollapsed?: boolean;
+    /** Toggle collapse handler (makes header clickable) */
+    onToggle?: () => void;
+    /** Badge text (e.g., "3 fields", "Required", "Complete") */
+    badge?: string;
+    /** Badge variant */
+    badgeVariant?: "default" | "primary" | "success" | "warning" | "danger";
+    /** Icon name to show before title */
+    icon?: string;
+    /** Whether section has validation errors */
+    hasErrors?: boolean;
+    /** Whether section is complete */
+    isComplete?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const FormSectionHeader: React.FC<FormSectionHeaderProps>;