@almadar/ui 2.0.1 → 2.0.2

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

@@ -1,55 +0,0 @@
-/**
- * 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

@@ -1,67 +0,0 @@
-/**
- * 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

@@ -1,44 +0,0 @@
-/**
- * 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

@@ -1,30 +0,0 @@
-/**
- * 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

@@ -1,46 +0,0 @@
-/**
- * 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

@@ -1,25 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,54 +0,0 @@
-/**
- * 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

@@ -1,43 +0,0 @@
-/**
- * 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

@@ -1,69 +0,0 @@
-/**
- * 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

@@ -1,16 +0,0 @@
-/**
- * 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

@@ -1,30 +0,0 @@
-/**
- * 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>;

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

@@ -1,54 +0,0 @@
-/**
- * Grid Component
- *
- * A CSS Grid wrapper with responsive column support.
- * Useful for creating multi-column layouts.
- */
-import React from 'react';
-export type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none';
-export type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-export type GridAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
-export type GridJustify = 'start' | 'center' | 'end' | 'stretch';
-export interface ResponsiveGridCols {
-    /** Base/mobile columns */
-    base?: GridCols;
-    /** Small screens (640px+) */
-    sm?: GridCols;
-    /** Medium screens (768px+) */
-    md?: GridCols;
-    /** Large screens (1024px+) */
-    lg?: GridCols;
-    /** Extra large screens (1280px+) */
-    xl?: GridCols;
-}
-export interface GridProps {
-    /** Number of columns (can be responsive object) */
-    cols?: GridCols | ResponsiveGridCols;
-    /** Number of rows */
-    rows?: number;
-    /** Gap between items */
-    gap?: GridGap;
-    /** Row gap (overrides gap for rows) */
-    rowGap?: GridGap;
-    /** Column gap (overrides gap for columns) */
-    colGap?: GridGap;
-    /** Align items on block axis */
-    alignItems?: GridAlign;
-    /** Justify items on inline axis */
-    justifyItems?: GridJustify;
-    /** Auto-flow direction */
-    flow?: 'row' | 'col' | 'row-dense' | 'col-dense';
-    /** Custom class name */
-    className?: string;
-    /** Inline styles */
-    style?: React.CSSProperties;
-    /** Children elements */
-    children: React.ReactNode;
-    /** HTML element to render as */
-    as?: React.ElementType;
-}
-/**
- * Grid - CSS Grid layout wrapper
- */
-export declare const Grid: React.FC<GridProps>;
-export default Grid;

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

@@ -1,24 +0,0 @@
-/**
- * InputGroup Molecule Component
- *
- * A component for grouping input with addons (icons, buttons, text).
- * Uses Input, Button, Icon, and Typography atoms.
- */
-import React from "react";
-import type { LucideIcon } from "lucide-react";
-import { InputProps } from "../atoms/Input";
-export interface InputGroupProps extends Omit<InputProps, "icon" | "iconRight"> {
-    /**
-     * Left addon (icon, button, or text)
-     */
-    leftAddon?: React.ReactNode | LucideIcon;
-    /**
-     * Right addon (icon, button, or text)
-     */
-    rightAddon?: React.ReactNode | LucideIcon;
-    /**
-     * Additional CSS classes
-     */
-    className?: string;
-}
-export declare const InputGroup: React.FC<InputGroupProps>;

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

@@ -1,7 +0,0 @@
-import React from "react";
-export interface LoadingStateProps {
-    title?: string;
-    message?: string;
-    className?: string;
-}
-export declare const LoadingState: React.FC<LoadingStateProps>;