@almadar/ui 2.0.0 → 2.0.1

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

@@ -0,0 +1,38 @@
+export { ErrorBoundary, type ErrorBoundaryProps } from './ErrorBoundary';
+export { FormField, type FormFieldProps } from './FormField';
+export { EmptyState, type EmptyStateProps } from './EmptyState';
+export { LoadingState, type LoadingStateProps } from './LoadingState';
+export { ErrorState, type ErrorStateProps } from './ErrorState';
+export { Skeleton, type SkeletonProps, type SkeletonVariant } from './Skeleton';
+export { Accordion, type AccordionProps, type AccordionItem } from './Accordion';
+export { Alert, type AlertProps, type AlertVariant } from './Alert';
+export { Breadcrumb, type BreadcrumbProps, type BreadcrumbItem } from './Breadcrumb';
+export { ButtonGroup, type ButtonGroupProps } from './ButtonGroup';
+export { FilterGroup, type FilterGroupProps, type FilterDefinition } from './FilterGroup';
+export { Card as ActionCard, type CardProps as ActionCardProps, type CardAction } from './Card';
+export { Container, type ContainerProps } from './Container';
+export { Flex, type FlexProps } from './Flex';
+export { FloatingActionButton, type FloatingActionButtonProps } from './FloatingActionButton';
+export { Grid, type GridProps } from './Grid';
+export { InputGroup, type InputGroupProps } from './InputGroup';
+export { Menu, type MenuProps, type MenuItem } from './Menu';
+export { Modal, type ModalProps, type ModalSize } from './Modal';
+export { Pagination, type PaginationProps } from './Pagination';
+export { Popover, type PopoverProps } from './Popover';
+export { RelationSelect, type RelationSelectProps, type RelationOption } from './RelationSelect';
+export { SearchInput, type SearchInputProps } from './SearchInput';
+export { SidePanel, type SidePanelProps } from './SidePanel';
+export { SimpleGrid, type SimpleGridProps } from './SimpleGrid';
+export { Tabs, type TabsProps, type TabItem } from './Tabs';
+export { Toast, type ToastProps, type ToastVariant } from './Toast';
+export { Tooltip, type TooltipProps } from './Tooltip';
+export { Drawer, type DrawerProps, type DrawerPosition, type DrawerSize } from './Drawer';
+export { WizardProgress, type WizardProgressProps, type WizardProgressStep } from './WizardProgress';
+export { WizardNavigation, type WizardNavigationProps } from './WizardNavigation';
+export { MarkdownContent, type MarkdownContentProps } from './markdown/MarkdownContent';
+export { CodeBlock, type CodeBlockProps } from './markdown/CodeBlock';
+export { QuizBlock, type QuizBlockProps } from './QuizBlock';
+export { ScaledDiagram, type ScaledDiagramProps } from './ScaledDiagram';
+export { RepeatableFormSection, type RepeatableFormSectionProps, type RepeatableItem } from './RepeatableFormSection';
+export { ViolationAlert, type ViolationAlertProps, type ViolationRecord } from './ViolationAlert';
+export { FormSectionHeader, type FormSectionHeaderProps } from './FormSectionHeader';

package/dist/components/molecules/markdown/CodeBlock.d.ts

@@ -0,0 +1,25 @@
+/**
+ * CodeBlock Molecule Component
+ *
+ * A syntax-highlighted code block with copy-to-clipboard functionality.
+ * Preserves scroll position during re-renders.
+ *
+ * Event Contract:
+ * - Emits: UI:COPY_CODE { language, success }
+ */
+import React from 'react';
+export interface CodeBlockProps {
+    /** The code content to display */
+    code: string;
+    /** Programming language for syntax highlighting */
+    language?: string;
+    /** Show the copy button */
+    showCopyButton?: boolean;
+    /** Show the language badge */
+    showLanguageBadge?: boolean;
+    /** Maximum height before scrolling */
+    maxHeight?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const CodeBlock: React.NamedExoticComponent<CodeBlockProps>;

package/dist/components/molecules/markdown/MarkdownContent.d.ts

@@ -0,0 +1,26 @@
+/**
+ * MarkdownContent Molecule Component
+ *
+ * Renders markdown content with support for GFM (GitHub Flavored Markdown)
+ * and math equations (KaTeX). Handles inline code only — fenced code blocks
+ * should be parsed out and rendered with CodeBlock component.
+ *
+ * Event Contract:
+ * - No events emitted (display-only component)
+ * - entityAware: false
+ *
+ * NOTE: react-markdown's `components` override API requires native HTML
+ * elements — this is the same library-boundary exception as `<iframe>` in
+ * DocumentViewer and `<svg>` in JazariStateMachine/StateMachineView.
+ */
+import React from 'react';
+import 'katex/dist/katex.min.css';
+export interface MarkdownContentProps {
+    /** The markdown content to render */
+    content: string;
+    /** Text direction */
+    direction?: 'rtl' | 'ltr';
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const MarkdownContent: React.NamedExoticComponent<MarkdownContentProps>;

package/dist/components/organisms/CardGrid.d.ts

@@ -0,0 +1,72 @@
+/**
+ * CardGrid Component
+ *
+ * A dumb, responsive grid specifically designed for card layouts.
+ * Uses CSS Grid auto-fit for automatic responsive columns.
+ *
+ * Data comes exclusively from the `data` prop (provided by the trait via render-ui).
+ * All user interactions emit events via useEventBus — never manages internal state
+ * for pagination, filtering, or search. All state is owned by the trait state machine.
+ */
+import React from 'react';
+import type { EntityDisplayProps } from './types';
+export type CardGridGap = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Action configuration for card items (schema-driven)
+ */
+export interface CardItemAction {
+    /** Action button label */
+    label: string;
+    /** Event to dispatch on click (schema metadata) */
+    event?: string;
+    /** Navigation URL - supports template interpolation like "/products/{{row.id}}" */
+    navigatesTo?: string;
+    /** Callback on click */
+    onClick?: (item: unknown) => void;
+    /** Action used by generated code - alternative to event */
+    action?: string;
+    /** Action placement - accepts string for compatibility with generated code */
+    placement?: 'card' | 'footer' | 'row' | string;
+    /** Button variant - accepts string for compatibility with generated code */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | string;
+}
+/**
+ * Field definition - can be a simple string or object with key/header
+ */
+export type FieldDef = string | {
+    key: string;
+    header?: string;
+};
+export interface CardGridProps extends EntityDisplayProps {
+    /** Minimum width of each card (default: 280px) */
+    minCardWidth?: number;
+    /** Maximum number of columns */
+    maxCols?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Gap between cards */
+    gap?: CardGridGap;
+    /** Align cards vertically in their cells */
+    alignItems?: 'start' | 'center' | 'end' | 'stretch';
+    /** Children elements (cards) - optional when using entity/data props */
+    children?: React.ReactNode;
+    /** Fields to display - accepts string[] or {key, header}[] for unified interface */
+    fields?: readonly FieldDef[];
+    /** Alias for fields - backwards compatibility */
+    fieldNames?: readonly string[];
+    /** Alias for fields - backwards compatibility */
+    columns?: readonly FieldDef[];
+    /** Actions for each card item (schema-driven) */
+    itemActions?: readonly CardItemAction[];
+    /** Show total count in pagination */
+    showTotal?: boolean;
+}
+/**
+ * CardGrid - Responsive card collection layout
+ *
+ * Can be used in two ways:
+ * 1. With children: <CardGrid><Card>...</Card></CardGrid>
+ * 2. With data: <CardGrid entity="Task" fieldNames={['title']} data={tasks} />
+ *
+ * All data comes from the `data` prop. Pagination display hints come from
+ * `page`, `pageSize`, and `totalCount` props (set by the trait via render-ui).
+ */
+export declare const CardGrid: React.FC<CardGridProps>;

package/dist/components/organisms/Chart.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Chart Organism Component
+ *
+ * A data visualization component supporting bar, line, pie, and area chart types.
+ * Composes atoms and molecules for layout, uses CSS variables for theming.
+ *
+ * Orbital Component Interface Compliance:
+ * - Entity binding with auto-fetch when entity is a string
+ * - Event emission via useEventBus (UI:* events)
+ * - isLoading and error state props
+ * - className for external styling
+ */
+import React from "react";
+export type ChartType = "bar" | "line" | "pie" | "area" | "donut";
+export interface ChartDataPoint {
+    label: string;
+    value: number;
+    color?: string;
+}
+export interface ChartSeries {
+    name: string;
+    data: readonly ChartDataPoint[];
+    color?: string;
+}
+export interface ChartAction {
+    label: string;
+    event?: string;
+    navigatesTo?: string;
+    variant?: "primary" | "secondary" | "ghost";
+}
+export interface ChartProps {
+    /** Chart title */
+    title?: string;
+    /** Chart subtitle / description */
+    subtitle?: string;
+    /** Chart type */
+    chartType?: ChartType;
+    /** Data series */
+    series?: readonly ChartSeries[];
+    /** Simple data (single series shorthand) */
+    data?: readonly ChartDataPoint[];
+    /** Chart height in px */
+    height?: number;
+    /** Show legend */
+    showLegend?: boolean;
+    /** Show values on chart */
+    showValues?: boolean;
+    /** Actions for chart interactions */
+    actions?: readonly ChartAction[];
+    /** Entity name for schema-driven auto-fetch */
+    entity?: string;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Error state */
+    error?: Error | null;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const Chart: React.FC<ChartProps>;

package/dist/components/organisms/CodeViewer.d.ts

@@ -0,0 +1,67 @@
+/**
+ * CodeViewer Organism Component
+ *
+ * A code/diff viewer with syntax highlighting and line numbers.
+ * Composes atoms and molecules for layout. Uses pre/code elements
+ * which are semantically necessary for code display.
+ *
+ * Orbital Component Interface Compliance:
+ * - Entity binding with auto-fetch when entity is a string
+ * - Event emission via useEventBus (UI:* events)
+ * - isLoading and error state props
+ * - className for external styling
+ */
+import React from "react";
+export type CodeViewerMode = "code" | "diff";
+export interface DiffLine {
+    type: "add" | "remove" | "context";
+    content: string;
+    lineNumber?: number;
+}
+export interface CodeViewerAction {
+    label: string;
+    event?: string;
+    navigatesTo?: string;
+    variant?: "primary" | "secondary" | "ghost";
+}
+export interface CodeViewerProps {
+    /** Viewer title */
+    title?: string;
+    /** Code content */
+    code?: string;
+    /** Language for display label */
+    language?: string;
+    /** Diff lines (for diff mode) */
+    diff?: readonly DiffLine[];
+    /** Old value (for generating diff) */
+    oldValue?: string;
+    /** New value (for generating diff) */
+    newValue?: string;
+    /** Display mode */
+    mode?: CodeViewerMode;
+    /** Show line numbers */
+    showLineNumbers?: boolean;
+    /** Show copy button */
+    showCopy?: boolean;
+    /** Enable word wrap */
+    wordWrap?: boolean;
+    /** Max height before scrolling */
+    maxHeight?: number | string;
+    /** Multiple files (tabbed view) */
+    files?: readonly {
+        label: string;
+        code: string;
+        language?: string;
+    }[];
+    /** Actions */
+    actions?: readonly CodeViewerAction[];
+    /** Entity name for schema-driven auto-fetch */
+    entity?: string;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Error state */
+    error?: Error | null;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const CodeViewer: React.FC<CodeViewerProps>;