@almadar/ui 2.0.0 → 2.0.1

package/dist/components/atoms/TextHighlight.d.ts

@@ -0,0 +1,53 @@
+/**
+ * TextHighlight Atom Component
+ *
+ * A styled span component for highlighting text with annotations (questions or notes).
+ * Uses different colors for different annotation types:
+ * - Questions: Blue highlight
+ * - Notes: Yellow highlight
+ */
+import React from "react";
+export type HighlightType = "question" | "note";
+export interface TextHighlightProps {
+    /**
+     * Type of highlight (determines color)
+     */
+    highlightType: HighlightType;
+    /**
+     * Whether the highlight is currently active/focused
+     * @default false
+     */
+    isActive?: boolean;
+    /**
+     * Callback when highlight is clicked
+     */
+    onClick?: () => void;
+    /**
+     * Callback when highlight is hovered
+     */
+    onMouseEnter?: () => void;
+    /**
+     * Callback when hover ends
+     */
+    onMouseLeave?: () => void;
+    /**
+     * Unique ID for the annotation
+     */
+    annotationId?: string;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Highlighted text content
+     */
+    children: React.ReactNode;
+    /** Declarative event name — emits UI:{action} via eventBus on click */
+    action?: string;
+    /** Declarative hover event — emits UI:{hoverEvent} with { hovered: true/false } */
+    hoverEvent?: string;
+}
+/**
+ * TextHighlight component for rendering highlighted text annotations
+ */
+export declare const TextHighlight: React.FC<TextHighlightProps>;

package/dist/components/atoms/Textarea.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    error?: string;
+}
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/atoms/ThemeSelector.d.ts

@@ -0,0 +1,21 @@
+/**
+ * ThemeSelector - Design theme selector component
+ *
+ * A dropdown/toggle component for switching between design themes.
+ *
+ * @packageDocumentation
+ */
+import React from "react";
+interface ThemeSelectorProps {
+    /** Optional className */
+    className?: string;
+    /** Show as dropdown or buttons */
+    variant?: "dropdown" | "buttons";
+    /** Show labels */
+    showLabels?: boolean;
+}
+/**
+ * ThemeSelector component for switching design themes
+ */
+export declare const ThemeSelector: React.FC<ThemeSelectorProps>;
+export default ThemeSelector;

package/dist/components/atoms/ThemeToggle.d.ts

@@ -0,0 +1,33 @@
+/**
+ * ThemeToggle Atom Component
+ *
+ * A button that toggles between light and dark themes.
+ * Uses Sun and Moon icons to indicate current/target theme.
+ *
+ * @packageDocumentation
+ */
+import React from "react";
+export interface ThemeToggleProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** Size variant */
+    size?: "sm" | "md" | "lg";
+    /** Show label text */
+    showLabel?: boolean;
+}
+/**
+ * ThemeToggle component for switching between light and dark modes
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ThemeToggle />
+ *
+ * // With label
+ * <ThemeToggle showLabel />
+ *
+ * // Custom size
+ * <ThemeToggle size="lg" />
+ * ```
+ */
+export declare const ThemeToggle: React.FC<ThemeToggleProps>;

package/dist/components/atoms/Typography.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Typography Atom Component
+ *
+ * Text elements following the KFlow design system with theme-aware styling.
+ */
+import React from "react";
+export type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2" | "body" | "caption" | "overline" | "small" | "large" | "label";
+export type TypographySize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+export interface TypographyProps {
+    /** Typography variant */
+    variant?: TypographyVariant;
+    /** Heading level (1-6) - alternative to variant for headings */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Text color */
+    color?: "primary" | "secondary" | "muted" | "error" | "success" | "warning" | "inherit";
+    /** Text alignment */
+    align?: "left" | "center" | "right";
+    /** Font weight override */
+    weight?: "light" | "normal" | "medium" | "semibold" | "bold";
+    /** Font size override */
+    size?: TypographySize;
+    /** Truncate with ellipsis (single line) */
+    truncate?: boolean;
+    /** Overflow handling mode */
+    overflow?: "visible" | "hidden" | "wrap" | "clamp-2" | "clamp-3";
+    /** Custom HTML element */
+    as?: keyof React.JSX.IntrinsicElements;
+    /** HTML id attribute */
+    id?: string;
+    /** Additional class names */
+    className?: string;
+    /** Inline style */
+    style?: React.CSSProperties;
+    /** Text content (alternative to children) */
+    content?: React.ReactNode;
+    /** Children elements */
+    children?: React.ReactNode;
+}
+export declare const Typography: React.FC<TypographyProps>;
+/**
+ * Heading component - convenience wrapper for Typography heading variants
+ */
+export interface HeadingProps extends Omit<TypographyProps, "variant"> {
+    /** Heading level (1-6) */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Override font size */
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+}
+export declare const Heading: React.FC<HeadingProps>;
+/**
+ * Text component - convenience wrapper for Typography body/caption variants
+ */
+export interface TextProps extends Omit<TypographyProps, "level"> {
+    /** Text variant */
+    variant?: "body" | "body1" | "body2" | "caption" | "small" | "large" | "label" | "overline";
+}
+export declare const Text: React.FC<TextProps>;

package/dist/components/atoms/game/ControlButton.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+export interface ControlButtonProps {
+    /** Button label text */
+    label?: string;
+    /** Icon component or emoji */
+    icon?: React.ReactNode;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | string;
+    /** Shape variant */
+    shape?: 'circle' | 'rounded' | 'square' | string;
+    /** Visual variant */
+    variant?: 'primary' | 'secondary' | 'ghost' | string;
+    /** Called when button is pressed */
+    onPress?: () => void;
+    /** Called when button is released */
+    onRelease?: () => void;
+    /** Declarative event name emitted on press via useEventBus */
+    pressEvent?: string;
+    /** Declarative event name emitted on release via useEventBus */
+    releaseEvent?: string;
+    /** Whether the button is currently pressed */
+    pressed?: boolean;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function ControlButton({ label, icon, size, shape, variant, onPress, onRelease, pressEvent, releaseEvent, pressed, disabled, className, }: ControlButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ControlButton {
+    var displayName: string;
+}

package/dist/components/atoms/game/HealthBar.d.ts

@@ -0,0 +1,18 @@
+export interface HealthBarProps {
+    /** Current health value */
+    current: number;
+    /** Maximum health value */
+    max: number;
+    /** Display format */
+    format?: 'hearts' | 'bar' | 'numeric';
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional CSS classes */
+    className?: string;
+    /** Animation on change */
+    animated?: boolean;
+}
+export declare function HealthBar({ current, max, format, size, className, animated, }: HealthBarProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace HealthBar {
+    var displayName: string;
+}

package/dist/components/atoms/game/ScoreDisplay.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+export interface ScoreDisplayProps {
+    /** Current score value */
+    value: number;
+    /** Label to display before score */
+    label?: string;
+    /** Icon component or emoji */
+    icon?: React.ReactNode;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Additional CSS classes */
+    className?: string;
+    /** Animation on value change */
+    animated?: boolean;
+    /** Number formatting locale */
+    locale?: string;
+}
+export declare function ScoreDisplay({ value, label, icon, size, className, animated, locale, }: ScoreDisplayProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ScoreDisplay {
+    var displayName: string;
+}

package/dist/components/atoms/game/Sprite.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Sprite Component
+ *
+ * Renders a single frame from a spritesheet with transform support.
+ */
+import React from 'react';
+export interface SpriteProps {
+    /** Spritesheet image URL */
+    spritesheet: string;
+    /** Width of each frame in pixels */
+    frameWidth: number;
+    /** Height of each frame in pixels */
+    frameHeight: number;
+    /** Frame index to display (0-based, left-to-right, top-to-bottom) */
+    frame: number;
+    /** X position in pixels */
+    x: number;
+    /** Y position in pixels */
+    y: number;
+    /** Scale factor (default: 1) */
+    scale?: number;
+    /** Flip horizontally */
+    flipX?: boolean;
+    /** Flip vertically */
+    flipY?: boolean;
+    /** Rotation in degrees */
+    rotation?: number;
+    /** Opacity (0-1) */
+    opacity?: number;
+    /** Z-index for layering */
+    zIndex?: number;
+    /** Number of columns in spritesheet (for frame calculation) */
+    columns?: number;
+    /** Optional className */
+    className?: string;
+    /** Optional onClick handler */
+    onClick?: () => void;
+    /** Declarative event name emitted on click via useEventBus */
+    action?: string;
+}
+/**
+ * Sprite component for rendering spritesheet frames
+ *
+ * @example
+ * ```tsx
+ * <Sprite
+ *   spritesheet="/sprites/player.png"
+ *   frameWidth={32}
+ *   frameHeight={32}
+ *   frame={currentFrame}
+ *   x={player.x}
+ *   y={player.y}
+ *   flipX={player.facingLeft}
+ *   scale={2}
+ * />
+ * ```
+ */
+export declare function Sprite({ spritesheet, frameWidth, frameHeight, frame, x, y, scale, flipX, flipY, rotation, opacity, zIndex, columns, className, onClick, action, }: SpriteProps): React.JSX.Element;
+/**
+ * Canvas-based sprite renderer for better performance in game loops
+ */
+export declare function drawSprite(ctx: CanvasRenderingContext2D, image: HTMLImageElement, props: Omit<SpriteProps, 'spritesheet' | 'className' | 'onClick'>): void;
+export default Sprite;

package/dist/components/atoms/game/StateIndicator.d.ts

@@ -0,0 +1,31 @@
+/**
+ * StateIndicator Component
+ *
+ * Displays a visual indicator for a game entity's current state.
+ * Generic — not tied to any specific game. Projects can extend
+ * the state styles via the `stateStyles` prop.
+ */
+import React from 'react';
+export interface StateStyle {
+    icon: string;
+    bgClass: string;
+}
+export interface StateIndicatorProps {
+    /** The current state name */
+    state: string;
+    /** Optional label override (defaults to capitalized state name) */
+    label?: string;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether to show pulse animation on non-idle states */
+    animated?: boolean;
+    /** Custom state styles to extend/override defaults */
+    stateStyles?: Record<string, StateStyle>;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function StateIndicator({ state, label, size, animated, stateStyles, className, }: StateIndicatorProps): React.JSX.Element;
+export declare namespace StateIndicator {
+    var displayName: string;
+}
+export default StateIndicator;

package/dist/components/atoms/game/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Game Atom Components
+ *
+ * Basic building blocks for game UI.
+ *
+ * @packageDocumentation
+ */
+export { HealthBar, type HealthBarProps } from './HealthBar';
+export { ScoreDisplay, type ScoreDisplayProps } from './ScoreDisplay';
+export { ControlButton, type ControlButtonProps } from './ControlButton';
+export { Sprite, drawSprite, type SpriteProps } from './Sprite';
+export { StateIndicator, type StateIndicatorProps, type StateStyle } from './StateIndicator';

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

@@ -0,0 +1,27 @@
+export { Button, type ButtonProps } from "./Button";
+export { Input, type InputProps } from "./Input";
+export { Label, type LabelProps } from "./Label";
+export { Textarea, type TextareaProps } from "./Textarea";
+export { Select, type SelectProps, type SelectOption } from "./Select";
+export { Checkbox, type CheckboxProps } from "./Checkbox";
+export { Card, CardHeader, CardTitle, CardContent, CardBody, CardFooter, type CardProps, } from "./Card";
+export { Badge, type BadgeProps, type BadgeVariant } from "./Badge";
+export { Spinner, type SpinnerProps } from "./Spinner";
+export { Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, } from "./Avatar";
+export { Box, type BoxProps, type BoxPadding, type BoxMargin, type BoxBg, type BoxRounded, type BoxShadow, } from "./Box";
+export { Center, type CenterProps } from "./Center";
+export { Divider, type DividerProps, type DividerOrientation } from "./Divider";
+export { Icon, type IconProps, type IconSize, type IconAnimation, } from "./Icon";
+export { ProgressBar, type ProgressBarProps, type ProgressBarVariant, type ProgressBarColor, } from "./ProgressBar";
+export { Radio, type RadioProps } from "./Radio";
+export { Switch, type SwitchProps } from "./Switch";
+export { Spacer, type SpacerProps, type SpacerSize } from "./Spacer";
+export { Stack, VStack, HStack, type StackProps, type VStackProps, type HStackProps, type StackDirection, type StackGap, type StackAlign, type StackJustify, } from "./Stack";
+export { TextHighlight, type TextHighlightProps, type HighlightType, } from "./TextHighlight";
+export { Typography, Heading, Text, type TypographyProps, type TypographyVariant, type HeadingProps, type TextProps, } from "./Typography";
+export { ThemeToggle, type ThemeToggleProps } from "./ThemeToggle";
+export { ThemeSelector } from "./ThemeSelector";
+export { Overlay, type OverlayProps } from "./Overlay";
+export { ConditionalWrapper, type ConditionalWrapperProps, type ConditionalContext, } from "./ConditionalWrapper";
+export { LawReferenceTooltip, type LawReferenceTooltipProps, type LawReference, } from "./LawReferenceTooltip";
+export * from "./game";

package/dist/components/index.d.ts

@@ -0,0 +1,6 @@
+export * from './atoms';
+export * from './molecules';
+export * from './organisms';
+export * from './templates';
+export { cn } from '../lib/cn';
+export * from '../hooks';

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-YNP2OBK4.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-YNP2OBK4.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>;