@skyfall_ai/aegis 0.1.0 → 0.3.1

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, LabelHTMLAttributes, HTMLAttributes, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+import { InputHTMLAttributes, ButtonHTMLAttributes, ReactNode, HTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, MouseEvent, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, ElementType, AnchorHTMLAttributes, LabelHTMLAttributes } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TooltipProps as TooltipProps$1, LegendProps } from 'recharts';
 
 /** Brand primary palette */
 declare const brandPrimary: {
@@ -261,6 +262,25 @@ declare const focusRing: {
     readonly outlineColor: "#2F6FE4";
 };
 
+interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Size of the input control */
+    size?: 'sm' | 'md' | 'lg';
+    /** Error state */
+    error?: boolean;
+    /** Full width */
+    fullWidth?: boolean;
+}
+/**
+ * TextField — single-line text input.
+ *
+ * Accessibility:
+ * - Use with <Label> and associate via htmlFor/id
+ * - Use aria-describedby to link to HelperText or error messages
+ * - aria-invalid signals error state to assistive technology
+ * - Visible border change + color signals error (not color alone)
+ */
+declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLInputElement>>;
+
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Visual variant */
     variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
@@ -305,59 +325,25 @@ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  */
 declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
-interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
-    /** Size of the input control */
+interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Layout direction */
+    orientation?: 'horizontal' | 'vertical';
+    /** Size applied to all child buttons */
     size?: 'sm' | 'md' | 'lg';
-    /** Error state */
-    error?: boolean;
-    /** Full width */
-    fullWidth?: boolean;
-}
-/**
- * Input — single-line text input.
- *
- * Accessibility:
- * - Use with <Label> and associate via htmlFor/id
- * - Use aria-describedby to link to HelperText or error messages
- * - aria-invalid signals error state to assistive technology
- * - Visible border change + color signals error (not color alone)
- */
-declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
-
-interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-    /** Error state */
-    error?: boolean;
-    /** Full width */
-    fullWidth?: boolean;
-    /** Allow vertical resize */
-    resize?: 'none' | 'vertical' | 'both';
+    /** Whether buttons should share borders (connected style) */
+    connected?: boolean;
 }
 /**
- * Textarea — multi-line text input.
+ * ButtonGroup — layout wrapper for grouping related buttons.
  *
- * Accessibility:
- * - Associate with Label via htmlFor/id
- * - Link to HelperText via aria-describedby
- */
-declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
-
-interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
-    /** Size */
-    size?: 'sm' | 'md' | 'lg';
-    /** Error state */
-    error?: boolean;
-    /** Full width */
-    fullWidth?: boolean;
-}
-/**
- * Select — native dropdown select.
+ * Renders multiple Button children in a connected or spaced row/column.
+ * When connected, adjacent buttons share borders for a toolbar appearance.
  *
  * Accessibility:
- * - Uses native <select> for full keyboard and screen reader support
- * - Associate with Label via htmlFor/id
- * - Custom chevron is decorative (aria-hidden on the icon)
+ * - Uses role="group" with optional aria-label for grouping context
+ * - Individual buttons retain their own keyboard navigation
  */
-declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+declare function ButtonGroup({ orientation, size, connected, className, children, ...props }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
 
 interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
     /** Label text displayed next to the checkbox */
@@ -376,6 +362,41 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'typ
  */
 declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
 
+interface CheckboxGroupOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface CheckboxGroupProps {
+    /** Group label rendered as fieldset legend */
+    label: string;
+    /** Shared name attribute for all checkboxes */
+    name: string;
+    /** Array of checkbox options */
+    options: CheckboxGroupOption[];
+    /** Currently selected values */
+    value?: string[];
+    /** Change handler — receives updated array of selected values */
+    onChange?: (value: string[]) => void;
+    /** Error message */
+    error?: string;
+    /** Layout direction */
+    orientation?: 'vertical' | 'horizontal';
+    /** Disabled state for all checkboxes */
+    disabled?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * CheckboxGroup — group of checkboxes with fieldset/legend for accessibility.
+ *
+ * Accessibility:
+ * - Uses <fieldset> and <legend> for semantic grouping
+ * - Error message linked via role="alert"
+ * - Each checkbox is individually focusable
+ */
+declare function CheckboxGroup({ label, name, options, value, onChange, error, orientation, disabled, className, }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
+
 interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
     /** Label text */
     label?: string;
@@ -392,6 +413,59 @@ interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>
  */
 declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
 
+interface RadioGroupOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface RadioGroupProps {
+    /** Group label rendered as fieldset legend */
+    label: string;
+    /** Shared name attribute for all radios */
+    name: string;
+    /** Array of radio options */
+    options: RadioGroupOption[];
+    /** Currently selected value */
+    value?: string;
+    /** Change handler — receives the selected value */
+    onChange?: (value: string) => void;
+    /** Error message */
+    error?: string;
+    /** Layout direction */
+    orientation?: 'vertical' | 'horizontal';
+    /** Disabled state for all radios */
+    disabled?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * RadioGroup — group of radio buttons with fieldset/legend for accessibility.
+ *
+ * Accessibility:
+ * - Uses <fieldset> and <legend> for semantic grouping
+ * - Arrow keys navigate between radios within the group
+ * - Error message rendered with role="alert"
+ */
+declare function RadioGroup({ label, name, options, value, onChange, error, orientation, disabled, className, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    /** Size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Error state */
+    error?: boolean;
+    /** Full width */
+    fullWidth?: boolean;
+}
+/**
+ * Select — native dropdown select.
+ *
+ * Accessibility:
+ * - Uses native <select> for full keyboard and screen reader support
+ * - Associate with Label via htmlFor/id
+ * - Custom chevron is decorative (aria-hidden on the icon)
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+
 interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
     /** Label text */
     label?: string;
@@ -409,257 +483,328 @@ interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'
  */
 declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
 
-interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
-    /** Mark the field as required — adds visual indicator */
-    required?: boolean;
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Error state */
+    error?: boolean;
+    /** Full width */
+    fullWidth?: boolean;
+    /** Allow vertical resize */
+    resize?: 'none' | 'vertical' | 'both';
 }
 /**
- * Label — form field label.
+ * Textarea — multi-line text input.
  *
  * Accessibility:
- * - Always associate with an input via htmlFor
- * - Required indicator uses both visual (*) and sr-only text
+ * - Associate with Label via htmlFor/id
+ * - Link to HelperText via aria-describedby
  */
-declare function Label({ required, className, children, ...props }: LabelProps): react_jsx_runtime.JSX.Element;
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
 
-interface HelperTextProps extends HTMLAttributes<HTMLParagraphElement> {
-    /** Render as error message */
-    error?: boolean;
+interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'value'> {
+    /** Current value */
+    value?: number;
+    /** Change handler */
+    onChange?: (value: number) => void;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md';
+    /** Accessible label text */
+    label?: string;
+    /** Show current value next to the slider */
+    showValue?: boolean;
+    /** Additional CSS class */
+    className?: string;
 }
 /**
- * HelperText — descriptive or error text beneath a form field.
+ * Slider — range input with custom styling.
  *
  * Accessibility:
- * - Link to input via aria-describedby on the input, matching this element's id
- * - Error messages use role="alert" for immediate screen reader announcement
- * - Error state uses both color and icon (not color alone)
+ * - Uses native input[type="range"] for full keyboard and AT support
+ * - Label linked via htmlFor/id
+ * - aria-valuemin, aria-valuemax, aria-valuenow communicated natively
+ * - showValue provides visual readout of current value
  */
-declare function HelperText({ error, className, children, ...props }: HelperTextProps): react_jsx_runtime.JSX.Element;
+declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLInputElement>>;
 
-interface CardProps extends HTMLAttributes<HTMLDivElement> {
-    /** Elevation level */
-    elevation?: 'flat' | 'raised';
-    /** Padding size */
-    padding?: 'none' | 'sm' | 'md' | 'lg';
+interface NumberFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'value' | 'prefix'> {
+    /** Current numeric value */
+    value?: number;
+    /** Change handler */
+    onChange?: (value: number) => void;
+    /** Minimum allowed value */
+    min?: number;
+    /** Maximum allowed value */
+    max?: number;
+    /** Increment step */
+    step?: number;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Error state */
+    error?: boolean;
+    /** Prefix text (e.g., "$") */
+    prefix?: string;
+    /** Suffix text (e.g., "mg") */
+    suffix?: string;
 }
 /**
- * Card — surface container for grouping related content.
+ * NumberField — numeric input with increment/decrement buttons.
  *
  * Accessibility:
- * - Uses semantic HTML; add role="region" + aria-label when card
- *   represents a distinct content section
- * - Border provides separation independent of shadow (not shadow alone)
+ * - Uses native input[type="number"] for spinbutton role
+ * - Increment/decrement buttons have aria-labels
+ * - Buttons are hidden from tab order (input handles keyboard)
+ * - min/max constraints are communicated to AT
  */
-declare function Card({ elevation, padding, className, children, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+declare const NumberField: react.ForwardRefExoticComponent<NumberFieldProps & react.RefAttributes<HTMLInputElement>>;
 
-interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
-    /** Status variant */
-    status?: 'neutral' | 'success' | 'warning' | 'error' | 'info';
+interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /** Size of the search control */
+    size?: 'sm' | 'md' | 'lg';
+    /** Error state */
+    error?: boolean;
+    /** Full width */
+    fullWidth?: boolean;
+    /** Callback when clear button is clicked */
+    onClear?: () => void;
+    /** Show the clear button when input has a value */
+    showClearButton?: boolean;
 }
 /**
- * Badge / StatusChip — small label for status or metadata.
+ * SearchField — search input with magnifying glass icon and optional clear button.
  *
  * Accessibility:
- * - Always include meaningful text content (not color alone)
- * - In healthcare contexts, pair with text like "Active", "Pending",
- *   "Critical" rather than relying on color to communicate status
- */
-declare function Badge({ status, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
-
-interface AlertProps extends HTMLAttributes<HTMLDivElement> {
-    /** Semantic status */
-    status?: 'info' | 'success' | 'warning' | 'error';
-    /** Optional title */
-    title?: string;
-    /** Optional action element (e.g., a close button) */
-    action?: ReactNode;
-}
-/**
- * Alert — contextual message banner.
- *
- * Accessibility:
- * - Uses role="alert" for errors/warnings (live region, immediately announced)
- * - Uses role="status" for info/success (polite announcement)
- * - Icon + color + text ensures meaning is communicated multiple ways
+ * - Uses role="searchbox" for semantic search intent
+ * - Clear button has aria-label for screen readers
+ * - Search icon is decorative (aria-hidden)
  */
-declare function Alert({ status, title, action, className, children, ...props }: AlertProps): react_jsx_runtime.JSX.Element;
+declare const SearchField: react.ForwardRefExoticComponent<SearchFieldProps & react.RefAttributes<HTMLInputElement>>;
 
-interface Tab {
-    id: string;
+interface AutocompleteOption {
+    value: string;
     label: string;
-    content: ReactNode;
-    disabled?: boolean;
 }
-interface TabsProps {
-    /** Tab definitions */
-    tabs: Tab[];
-    /** Controlled active tab id */
-    activeTab?: string;
-    /** Callback when tab changes */
-    onTabChange?: (id: string) => void;
-    /** Additional className for the wrapper */
+interface AutocompleteProps {
+    /** Available options */
+    options: AutocompleteOption[];
+    /** Selected value */
+    value?: string;
+    /** Change handler — receives the selected value */
+    onChange?: (value: string) => void;
+    /** Callback when the text input changes */
+    onInputChange?: (inputValue: string) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Error state */
+    error?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Show a loading spinner in the dropdown */
+    loading?: boolean;
+    /** Text shown when no results match */
+    noResultsText?: string;
+    /** Additional CSS class */
     className?: string;
 }
 /**
- * Tabs — tabbed interface for switching between content panels.
+ * Autocomplete — combobox input with filtered suggestions dropdown.
  *
  * Accessibility:
- * - Full WAI-ARIA tabs pattern: role="tablist", role="tab", role="tabpanel"
- * - Arrow key navigation between tabs
- * - Home/End keys jump to first/last tab
- * - aria-selected, aria-controls, aria-labelledby for AT relationships
- * - Only active panel is in the tab order (tabIndex=0 on active tab)
+ * - role="combobox" on input with aria-expanded, aria-controls, aria-activedescendant
+ * - Dropdown uses role="listbox" with role="option" items
+ * - Arrow keys navigate options, Enter selects, Escape closes
+ * - Full ARIA combobox pattern per WAI-ARIA 1.2
  */
-declare function Tabs({ tabs, activeTab, onTabChange, className }: TabsProps): react_jsx_runtime.JSX.Element;
+declare function Autocomplete({ options, value, onChange, onInputChange, placeholder, disabled, error, size, loading, noResultsText, className, }: AutocompleteProps): react_jsx_runtime.JSX.Element;
 
-interface ModalProps {
-    /** Additional className */
+interface MultiSelectOption {
+    value: string;
+    label: string;
+}
+interface MultiSelectProps {
+    /** Available options */
+    options: MultiSelectOption[];
+    /** Currently selected values */
+    value?: string[];
+    /** Change handler — receives updated array of selected values */
+    onChange?: (value: string[]) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Error state */
+    error?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Maximum number of tags visible before showing "+N more" */
+    maxDisplayedTags?: number;
+    /** Additional CSS class */
     className?: string;
-    /** Whether the modal is visible */
-    open: boolean;
-    /** Called when the modal should close */
-    onClose: () => void;
-    /** Modal title (rendered in header) */
-    title: ReactNode;
-    /** Max width */
-    size?: 'sm' | 'md' | 'lg' | 'xl';
-    /** Footer actions */
-    footer?: ReactNode;
 }
 /**
- * Modal / Dialog — overlay dialog for focused interactions.
+ * MultiSelect — multi-value select with tags and dropdown checkboxes.
  *
  * Accessibility:
- * - Uses native <dialog> element for built-in focus trapping and Escape handling
- * - aria-labelledby links to the title
- * - Focus is moved into the dialog on open
- * - Escape key closes the dialog
- * - Scrim click closes the dialog
- * - Healthcare note: for destructive actions (e.g., cancel appointment,
- *   delete record), always include clear confirmation language in the
- *   dialog and use danger-variant buttons
+ * - Uses role="combobox" with aria-expanded
+ * - Dropdown uses role="listbox" with role="option" items
+ * - Tags are removable via keyboard (Backspace removes last)
+ * - Escape closes dropdown, focus remains on control
  */
-declare function Modal({ open, onClose, title, size, footer, className, children }: ModalProps & {
-    children?: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+declare function MultiSelect({ options, value, onChange, placeholder, disabled, error, size, maxDisplayedTags, className, }: MultiSelectProps): react_jsx_runtime.JSX.Element;
 
-interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
-    /** Compact density for admin/operational views */
-    density?: 'default' | 'compact';
-    /** Striped rows for scan-ability */
-    striped?: boolean;
+interface FileUploadProps {
+    /** Accepted file types (e.g., ".pdf,.jpg,image/*") */
+    accept?: string;
+    /** Allow multiple files */
+    multiple?: boolean;
+    /** Max file size in bytes */
+    maxSize?: number;
+    /** Callback when files are selected or dropped */
+    onFilesSelected?: (files: File[]) => void;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Error message */
+    error?: string;
+    /** Additional CSS class */
+    className?: string;
 }
 /**
- * Table — data table with accessible defaults.
+ * FileUpload — dropzone for file upload with click and drag support.
  *
  * Accessibility:
- * - Semantic <table> / <thead> / <tbody> / <th> structure
- * - Use scope="col" on header cells
- * - For complex tables, use aria-describedby to link to a caption
- * - Healthcare note: clinical data tables should use tabular numerals
- *   (monospace) and adequate row height for readability under stress
+ * - Keyboard accessible via Enter/Space to open file dialog
+ * - Uses role="button" on the dropzone
+ * - aria-describedby links to instructions
+ * - File list announced after selection
  */
-declare function Table({ density, striped, className, children, ...props }: TableProps): react_jsx_runtime.JSX.Element;
-declare function TableHead({ className, children, ...props }: HTMLAttributes<HTMLTableSectionElement>): react_jsx_runtime.JSX.Element;
-declare function TableBody({ className, children, ...props }: HTMLAttributes<HTMLTableSectionElement>): react_jsx_runtime.JSX.Element;
-declare function TableRow({ className, children, ...props }: HTMLAttributes<HTMLTableRowElement>): react_jsx_runtime.JSX.Element;
-declare function TableHeaderCell({ className, children, ...props }: ThHTMLAttributes<HTMLTableCellElement>): react_jsx_runtime.JSX.Element;
-declare function TableCell({ className, children, ...props }: TdHTMLAttributes<HTMLTableCellElement>): react_jsx_runtime.JSX.Element;
+declare function FileUpload({ accept, multiple, maxSize, onFilesSelected, disabled, error, className, }: FileUploadProps): react_jsx_runtime.JSX.Element;
 
-interface TooltipProps {
-    /** Tooltip content */
-    content: ReactNode;
-    /** Trigger element */
-    children: ReactNode;
-    /** Placement */
-    placement?: 'top' | 'bottom';
-    /** Delay before showing (ms) */
-    delay?: number;
-    /** Additional className */
+interface OTPInputProps {
+    /** Number of OTP digits */
+    length?: number;
+    /** Current value string */
+    value?: string;
+    /** Change handler — receives the full OTP string */
+    onChange?: (value: string) => void;
+    /** Error state */
+    error?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Auto-focus first input on mount */
+    autoFocus?: boolean;
+    /** Additional CSS class */
     className?: string;
 }
 /**
- * Tooltip — supplementary text on hover/focus.
+ * OTPInput — code/OTP input with separate boxes that auto-advance.
  *
  * Accessibility:
- * - Shows on both hover and keyboard focus
- * - Uses role="tooltip" with aria-describedby linking
- * - Respects reduced motion preferences (no animation)
- * - Healthcare note: never put critical information in tooltips alone.
- *   Use for supplementary context only, since tooltips are easy to miss
- *   and not accessible on touch devices.
+ * - Each digit input has aria-label describing its position
+ * - Supports keyboard navigation (Backspace moves to previous)
+ * - Paste support fills all boxes at once
+ * - Error state communicated via aria-invalid
  */
-declare function Tooltip({ content, children, placement, delay, className }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare function OTPInput({ length, value, onChange, error, disabled, autoFocus, className, }: OTPInputProps): react_jsx_runtime.JSX.Element;
 
-interface DividerProps extends HTMLAttributes<HTMLHRElement> {
-    /** Spacing above and below */
-    spacing?: 'none' | 'sm' | 'md' | 'lg';
+interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Current color value (hex) */
+    value?: string;
+    /** Called when color changes */
+    onChange?: (color: string) => void;
+    /** Predefined color swatches */
+    swatches?: string[];
+    /** Label */
+    label?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md';
 }
 /**
- * Divider — horizontal rule for visual separation.
+ * ColorPicker — color selection input with swatch palette and native picker.
+ *
+ * Provides a swatch grid for quick selection plus a native `<input type="color">`
+ * fallback for custom colors.
  *
  * Accessibility:
- * - Uses semantic <hr> which conveys a thematic break
- * - role="separator" is implicit for <hr>
+ * - Swatch buttons have aria-label with hex value
+ * - Selected swatch indicated with aria-pressed
+ * - Native color input provides full keyboard + assistive tech support
  */
-declare function Divider({ spacing, className, ...props }: DividerProps): react_jsx_runtime.JSX.Element;
+declare const ColorPicker: react.ForwardRefExoticComponent<ColorPickerProps & react.RefAttributes<HTMLDivElement>>;
 
-interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
-    /** Size */
+interface RatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Current rating value (0 = no rating) */
+    value?: number;
+    /** Called when rating changes */
+    onChange?: (value: number) => void;
+    /** Maximum rating value */
+    max?: number;
+    /** Size variant */
     size?: 'sm' | 'md' | 'lg';
-    /** Accessible label */
+    /** Whether the rating is read-only */
+    readOnly?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Label for accessibility */
     label?: string;
+    /** Custom icon renderer — receives filled state */
+    renderIcon?: (filled: boolean, index: number) => React.ReactNode;
 }
 /**
- * Spinner / LoadingIndicator — visual loading state.
+ * Rating — star-based rating input with keyboard navigation.
+ *
+ * Supports custom max values, read-only display, and custom icon rendering.
  *
  * Accessibility:
- * - role="status" with aria-label for screen reader announcement
- * - aria-live="polite" so loading state is announced without interrupting
- * - Healthcare note: in clinical workflows, always pair with text
- *   context ("Loading patient records...") so users understand what
- *   they are waiting for
+ * - Uses radio group pattern with arrow key navigation
+ * - Each star has aria-label with its value
+ * - Supports keyboard: ArrowLeft/Right to navigate, Enter/Space to select
  */
-declare function Spinner({ size, label, className, ...props }: SpinnerProps): react_jsx_runtime.JSX.Element;
+declare const Rating: react.ForwardRefExoticComponent<RatingProps & react.RefAttributes<HTMLDivElement>>;
 
-interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
-    /** Shape variant */
-    variant?: 'text' | 'circular' | 'rectangular';
-    /** Width (CSS value) */
-    width?: string | number;
-    /** Height (CSS value) */
-    height?: string | number;
-    /** Number of text lines (only for text variant) */
-    lines?: number;
+interface TagInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Current tag values */
+    value?: string[];
+    /** Called when tags change */
+    onChange?: (tags: string[]) => void;
+    /** Placeholder for the text input */
+    placeholder?: string;
+    /** Label */
+    label?: string;
+    /** Maximum number of tags allowed */
+    max?: number;
+    /** Size variant */
+    size?: 'sm' | 'md';
+    /** Disabled state */
+    disabled?: boolean;
+    /** Error state */
+    error?: boolean;
+    /** Characters that trigger tag creation (default: Enter, comma) */
+    separators?: string[];
+    /** Whether duplicates are allowed */
+    allowDuplicates?: boolean;
 }
 /**
- * Skeleton — placeholder loading indicator with shimmer animation.
+ * TagInput — multi-value text input that creates tag chips.
+ *
+ * Users type text and press Enter or comma to create tags.
+ * Tags can be removed with Backspace or by clicking the remove button.
  *
  * Accessibility:
- * - aria-hidden="true" since it is purely decorative
- * - Healthcare note: use Skeleton loaders in clinical dashboards to
- *   indicate data is loading, reducing perceived wait time
+ * - Tags have aria-label and remove button with aria-label
+ * - Backspace removes last tag when input is empty
+ * - Screen readers announce tag count via aria-describedby
  */
-declare function Skeleton({ variant, width, height, lines, className, style, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
-
-type StatusBadgeStatus = 'active' | 'inactive' | 'pending' | 'critical' | 'discharged' | 'scheduled' | 'cancelled' | 'in-progress';
-interface StatusBadgeProps extends HTMLAttributes<HTMLSpanElement> {
-    /** Healthcare status */
-    status: StatusBadgeStatus;
-    /** Size variant */
-    size?: 'sm' | 'md';
-    /** Show a colored status dot before the label */
-    dot?: boolean;
-}
-/**
- * StatusBadge — enhanced badge for healthcare workflow statuses.
- *
- * Accessibility:
- * - Always displays text label alongside color to avoid color-only indication
- * - Healthcare note: maps each clinical status to an appropriate semantic
- *   color (critical = red, active = green, pending = amber, etc.)
- */
-declare function StatusBadge({ status, size, dot, className, children, ...props }: StatusBadgeProps): react_jsx_runtime.JSX.Element;
+declare const TagInput: react.ForwardRefExoticComponent<TagInputProps & react.RefAttributes<HTMLDivElement>>;
 
 interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
     /** Image source URL */
@@ -685,27 +830,145 @@ interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
  */
 declare function Avatar({ src, alt, name, size, status, className, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
 
-interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
-    /** Optional icon displayed above the title */
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Status variant */
+    status?: 'neutral' | 'success' | 'warning' | 'error' | 'info';
+}
+/**
+ * Badge / StatusChip — small label for status or metadata.
+ *
+ * Accessibility:
+ * - Always include meaningful text content (not color alone)
+ * - In healthcare contexts, pair with text like "Active", "Pending",
+ *   "Critical" rather than relying on color to communicate status
+ */
+declare function Badge({ status, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+interface ChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'onClick'> {
+    /** Visual color variant */
+    color?: 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+    /** Size */
+    size?: 'sm' | 'md';
+    /** Chip style */
+    variant?: 'filled' | 'outlined';
+    /** Icon or avatar slot (leading) */
     icon?: ReactNode;
-    /** Title text */
-    title: string;
-    /** Descriptive text below the title */
+    /** Whether the chip is clickable */
+    onClick?: (e: MouseEvent<HTMLSpanElement>) => void;
+    /** Show a delete/dismiss button */
+    onDelete?: (e: MouseEvent<HTMLButtonElement>) => void;
+    /** Disabled state */
+    disabled?: boolean;
+}
+/**
+ * Chip — compact interactive element for tags, filters, and selections.
+ *
+ * Distinct from Badge: Chip is interactive (clickable, deletable) and
+ * larger; Badge is a read-only status label.
+ *
+ * Accessibility:
+ * - Clickable chips render with role="button" and tabIndex
+ * - Delete button has an accessible aria-label
+ * - Disabled state applies aria-disabled
+ * - Healthcare note: useful for allergy tags, condition labels,
+ *   insurance plan tags, filter selections
+ */
+declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface DividerProps extends HTMLAttributes<HTMLHRElement> {
+    /** Spacing above and below */
+    spacing?: 'none' | 'sm' | 'md' | 'lg';
+}
+/**
+ * Divider — horizontal rule for visual separation.
+ *
+ * Accessibility:
+ * - Uses semantic <hr> which conveys a thematic break
+ * - role="separator" is implicit for <hr>
+ */
+declare function Divider({ spacing, className, ...props }: DividerProps): react_jsx_runtime.JSX.Element;
+
+interface ListProps extends HTMLAttributes<HTMLUListElement> {
+    /** Show dividers between items */
+    divided?: boolean;
+    /** Padding inside list items */
+    padding?: 'none' | 'sm' | 'md';
+}
+/**
+ * List — composable list container for displaying groups of items.
+ *
+ * Accessibility:
+ * - Uses semantic <ul>/<li> structure
+ * - Interactive items rendered as buttons for keyboard access
+ * - Disabled items use aria-disabled
+ * - Selected items use aria-selected
+ */
+declare const List: react.ForwardRefExoticComponent<ListProps & react.RefAttributes<HTMLUListElement>>;
+interface ListItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'prefix'> {
+    /** Click handler — makes the item interactive */
+    onClick?: () => void;
+    /** Whether this item is selected */
+    selected?: boolean;
+    /** Whether this item is disabled */
+    disabled?: boolean;
+    /** Leading element (icon, avatar, etc.) */
+    prefix?: ReactNode;
+    /** Trailing element (badge, action button, etc.) */
+    suffix?: ReactNode;
+    /** Secondary description text */
     description?: string;
-    /** Optional action element (e.g., a button) */
-    action?: ReactNode;
+}
+declare const ListItem: react.ForwardRefExoticComponent<ListItemProps & react.RefAttributes<HTMLLIElement>>;
+
+interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    /** Compact density for admin/operational views */
+    density?: 'default' | 'compact';
+    /** Striped rows for scan-ability */
+    striped?: boolean;
 }
 /**
- * EmptyState — centered placeholder for empty tables, lists, or views.
+ * Table — data table with accessible defaults.
  *
  * Accessibility:
- * - Uses semantic heading and paragraph elements
- * - Healthcare note: provide clear, actionable guidance in empty states
- *   (e.g., "No patients match your filters. Try adjusting your search.")
+ * - Semantic <table> / <thead> / <tbody> / <th> structure
+ * - Use scope="col" on header cells
+ * - For complex tables, use aria-describedby to link to a caption
+ * - Healthcare note: clinical data tables should use tabular numerals
+ *   (monospace) and adequate row height for readability under stress
  */
-declare function EmptyState({ icon, title, description, action, className, ...props }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+declare function Table({ density, striped, className, children, ...props }: TableProps): react_jsx_runtime.JSX.Element;
+declare function TableHead({ className, children, ...props }: HTMLAttributes<HTMLTableSectionElement>): react_jsx_runtime.JSX.Element;
+declare function TableBody({ className, children, ...props }: HTMLAttributes<HTMLTableSectionElement>): react_jsx_runtime.JSX.Element;
+declare function TableRow({ className, children, ...props }: HTMLAttributes<HTMLTableRowElement>): react_jsx_runtime.JSX.Element;
+declare function TableHeaderCell({ className, children, ...props }: ThHTMLAttributes<HTMLTableCellElement>): react_jsx_runtime.JSX.Element;
+declare function TableCell({ className, children, ...props }: TdHTMLAttributes<HTMLTableCellElement>): react_jsx_runtime.JSX.Element;
+
+interface TooltipProps {
+    /** Tooltip content */
+    content: ReactNode;
+    /** Trigger element */
+    children: ReactNode;
+    /** Placement */
+    placement?: 'top' | 'bottom';
+    /** Delay before showing (ms) */
+    delay?: number;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Tooltip — supplementary text on hover/focus.
+ *
+ * Accessibility:
+ * - Shows on both hover and keyboard focus
+ * - Uses role="tooltip" with aria-describedby linking
+ * - Respects reduced motion preferences (no animation)
+ * - Healthcare note: never put critical information in tooltips alone.
+ *   Use for supplementary context only, since tooltips are easy to miss
+ *   and not accessible on touch devices.
+ */
+declare function Tooltip({ content, children, placement, delay, className }: TooltipProps): react_jsx_runtime.JSX.Element;
 
-interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
     /** Current value (0-100) */
     value: number;
     /** Maximum value (defaults to 100) */
@@ -720,7 +983,7 @@ interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
     showValue?: boolean;
 }
 /**
- * ProgressBar — horizontal bar indicating completion or progress.
+ * Progress — horizontal bar indicating completion or progress.
  *
  * Accessibility:
  * - role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax
@@ -728,31 +991,93 @@ interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
  * - Healthcare note: useful for treatment progress, form completion,
  *   or patient intake steps
  */
-declare function ProgressBar({ value, max, size, variant, label, showValue, className, ...props }: ProgressBarProps): react_jsx_runtime.JSX.Element;
+declare function Progress({ value, max, size, variant, label, showValue, className, ...props }: ProgressProps): react_jsx_runtime.JSX.Element;
 
-interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
-    /** Current active page (1-based) */
-    currentPage: number;
-    /** Total number of pages */
-    totalPages: number;
-    /** Callback when page changes */
-    onPageChange: (page: number) => void;
-    /** Number of sibling pages to show around the current page */
-    siblingCount?: number;
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /** Shape variant */
+    variant?: 'text' | 'circular' | 'rectangular';
+    /** Width (CSS value) */
+    width?: string | number;
+    /** Height (CSS value) */
+    height?: string | number;
+    /** Number of text lines (only for text variant) */
+    lines?: number;
+}
+/**
+ * Skeleton — placeholder loading indicator with shimmer animation.
+ *
+ * Accessibility:
+ * - aria-hidden="true" since it is purely decorative
+ * - Healthcare note: use Skeleton loaders in clinical dashboards to
+ *   indicate data is loading, reducing perceived wait time
+ */
+declare function Skeleton({ variant, width, height, lines, className, style, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Accessible label */
+    label?: string;
+}
+/**
+ * Spinner / LoadingIndicator — visual loading state.
+ *
+ * Accessibility:
+ * - role="status" with aria-label for screen reader announcement
+ * - aria-live="polite" so loading state is announced without interrupting
+ * - Healthcare note: in clinical workflows, always pair with text
+ *   context ("Loading patient records...") so users understand what
+ *   they are waiting for
+ */
+declare function Spinner({ size, label, className, ...props }: SpinnerProps): react_jsx_runtime.JSX.Element;
+
+type StatusBadgeStatus = 'active' | 'inactive' | 'pending' | 'critical' | 'discharged' | 'scheduled' | 'cancelled' | 'in-progress';
+interface StatusBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Healthcare status */
+    status: StatusBadgeStatus;
     /** Size variant */
     size?: 'sm' | 'md';
+    /** Show a colored status dot before the label */
+    dot?: boolean;
 }
 /**
- * Pagination — page navigation for paginated data.
+ * StatusBadge — enhanced badge for healthcare workflow statuses.
  *
  * Accessibility:
- * - Wraps in <nav> with aria-label="Pagination"
- * - Current page indicated with aria-current="page"
- * - Previous/Next buttons disabled at boundaries
- * - Healthcare note: use pagination for patient lists, lab results,
- *   and audit logs to keep pages manageable
+ * - Always displays text label alongside color to avoid color-only indication
+ * - Healthcare note: maps each clinical status to an appropriate semantic
+ *   color (critical = red, active = green, pending = amber, etc.)
  */
-declare function Pagination({ currentPage, totalPages, onPageChange, siblingCount, size, className, ...props }: PaginationProps): react_jsx_runtime.JSX.Element | null;
+declare function StatusBadge({ status, size, dot, className, children, ...props }: StatusBadgeProps): react_jsx_runtime.JSX.Element;
+
+type TimelineItemVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
+interface TimelineItem {
+    /** Unique identifier */
+    id: string;
+    /** Event title */
+    title: string;
+    /** Optional description */
+    description?: string;
+    /** Timestamp display string */
+    timestamp: string;
+    /** Optional icon to replace the default dot */
+    icon?: ReactNode;
+    /** Visual variant */
+    variant?: TimelineItemVariant;
+}
+interface TimelineProps extends HTMLAttributes<HTMLOListElement> {
+    /** Timeline items in chronological order */
+    items: TimelineItem[];
+}
+/**
+ * Timeline — vertical timeline for displaying sequential events.
+ *
+ * Accessibility:
+ * - Uses semantic <ol> for ordered event sequence
+ * - Each event is an <li> for proper list semantics
+ * - Icons are decorative (aria-hidden)
+ */
+declare function Timeline({ items, className, ...props }: TimelineProps): react_jsx_runtime.JSX.Element;
 
 interface DescriptionListItem {
     /** Label / term */
@@ -779,456 +1104,644 @@ interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
  */
 declare function DescriptionList({ items, layout, columns, className, style, ...props }: DescriptionListProps): react_jsx_runtime.JSX.Element;
 
-interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
-    /** Trigger element that opens the popover */
-    trigger: ReactNode;
-    /** Content rendered inside the popover */
-    content: ReactNode;
-    /** Controlled open state */
-    open?: boolean;
-    /** Callback when open state changes */
-    onOpenChange?: (open: boolean) => void;
-    /** Placement relative to the trigger */
-    placement?: 'top' | 'bottom' | 'left' | 'right';
-    /** Alignment along the placement axis */
-    align?: 'start' | 'center' | 'end';
+interface KbdProps extends HTMLAttributes<HTMLElement> {
+    /** Size variant */
+    size?: 'sm' | 'md';
 }
 /**
- * Popover — positioned overlay content triggered by a reference element.
+ * Kbd — keyboard shortcut / key indicator.
+ *
+ * Renders an inline `<kbd>` element styled to look like a physical key.
+ * Use to display keyboard shortcuts in menus, tooltips, and documentation.
  *
  * Accessibility:
- * - Escape key closes the popover
- * - Focus is managed: moves into popover on open, returns on close
- * - Click outside closes the popover
- * - Healthcare note: use for additional context like patient quick-view,
- *   medication details, or field-level help without navigating away
+ * - Uses semantic <kbd> element for screen readers
+ * - Screen readers will announce the content as keyboard input
  */
-declare function Popover({ trigger, content, open: controlledOpen, onOpenChange, placement, align, className, ...props }: PopoverProps): react_jsx_runtime.JSX.Element;
+declare function Kbd({ size, className, children, ...props }: KbdProps): react_jsx_runtime.JSX.Element;
 
-interface DrawerProps {
-    /** Additional className */
-    className?: string;
-    /** Whether the drawer is visible */
+interface TreeNode {
+    /** Unique identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Optional icon */
+    icon?: ReactNode;
+    /** Child nodes */
+    children?: TreeNode[];
+    /** Whether the node is disabled */
+    disabled?: boolean;
+}
+interface TreeViewProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** Tree data */
+    data: TreeNode[];
+    /** IDs of initially expanded nodes (uncontrolled) */
+    defaultExpanded?: string[];
+    /** IDs of expanded nodes (controlled) */
+    expanded?: string[];
+    /** Called when a node is expanded/collapsed */
+    onExpandChange?: (expanded: string[]) => void;
+    /** Currently selected node ID */
+    selected?: string | null;
+    /** Called when a node is selected */
+    onSelect?: (nodeId: string, node: TreeNode) => void;
+    /** Size variant */
+    size?: 'sm' | 'md';
+    /** Show connecting lines between levels */
+    showLines?: boolean;
+}
+/**
+ * TreeView — hierarchical data display with expand/collapse.
+ *
+ * Renders nested tree data with keyboard navigation, selection,
+ * and optional connecting guide lines.
+ *
+ * Accessibility:
+ * - Uses tree/treeitem/group ARIA roles
+ * - Arrow keys expand/collapse nodes
+ * - Enter/Space selects nodes
+ * - aria-expanded on branch nodes
+ */
+declare const TreeView: react.ForwardRefExoticComponent<TreeViewProps & react.RefAttributes<HTMLDivElement>>;
+
+type TypographyVariant = 'display-lg' | 'display-md' | 'heading-xl' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'label-lg' | 'label-md' | 'caption' | 'data' | 'code';
+type TypographyColor = 'primary' | 'secondary' | 'muted' | 'inverse' | 'success' | 'warning' | 'error' | 'info' | 'inherit';
+type TypographyWeight = 'regular' | 'medium' | 'semibold' | 'bold';
+type TypographyAlign = 'left' | 'center' | 'right';
+interface TypographyProps extends HTMLAttributes<HTMLElement> {
+    /** Typographic scale variant */
+    variant?: TypographyVariant;
+    /** Text color */
+    color?: TypographyColor;
+    /** Font weight override */
+    weight?: TypographyWeight;
+    /** Text alignment */
+    align?: TypographyAlign;
+    /** Render as a specific HTML element (overrides the variant default) */
+    as?: ElementType;
+    /** Truncate with ellipsis */
+    truncate?: boolean;
+    /** Clamp to N lines */
+    lineClamp?: number;
+}
+/**
+ * Typography — text rendering primitive.
+ *
+ * Maps directly to the Aegis type scale tokens and provides a consistent
+ * API for rendering text at any level of the hierarchy.
+ *
+ * Accessibility:
+ * - Defaults to the semantically correct HTML element for each variant
+ *   (h1–h4 for headings, p for body, code for code, span for labels)
+ * - Use `as` to override when the visual style and semantic level differ
+ * - `color="inherit"` defers to the parent color
+ */
+declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<HTMLElement>>;
+
+interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+    /** Semantic status */
+    status?: 'info' | 'success' | 'warning' | 'error';
+    /** Optional title */
+    title?: string;
+    /** Optional action element (e.g., a close button) */
+    action?: ReactNode;
+}
+/**
+ * Alert — contextual message banner.
+ *
+ * Accessibility:
+ * - Uses role="alert" for errors/warnings (live region, immediately announced)
+ * - Uses role="status" for info/success (polite announcement)
+ * - Icon + color + text ensures meaning is communicated multiple ways
+ */
+declare function Alert({ status, title, action, className, children, ...props }: AlertProps): react_jsx_runtime.JSX.Element;
+
+interface BackdropProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
+    /** Whether the backdrop is visible */
     open: boolean;
-    /** Called when the drawer should close */
-    onClose: () => void;
-    /** Drawer title */
-    title: ReactNode;
-    /** Width preset */
-    size?: 'sm' | 'md' | 'lg';
-    /** Which side the drawer slides from */
-    position?: 'left' | 'right';
-    /** Footer actions */
-    footer?: ReactNode;
-    /** Drawer body content */
-    children?: ReactNode;
+    /** Called when the backdrop is clicked */
+    onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+    /** Whether clicking the backdrop should be ignored (e.g. mandatory dialog) */
+    disableClick?: boolean;
+    /** Whether to lock body scroll while open */
+    lockScroll?: boolean;
+    /** Visual intensity */
+    variant?: 'default' | 'light' | 'opaque';
 }
 /**
- * Drawer — side panel overlay for detail views and forms.
+ * Backdrop — fullscreen overlay primitive.
+ *
+ * Backdrop provides the scrim layer behind Modal, Drawer, and Dialog.
+ * It handles body scroll locking, click-to-dismiss, and fade animation.
  *
  * Accessibility:
- * - Uses native <dialog> element for focus trapping
- * - Escape key closes the drawer
+ * - aria-hidden="true" — the backdrop itself is not interactive content
+ * - Focus management is the responsibility of the surface component (Modal, Drawer)
+ * - Body scroll lock prevents background content from scrolling under the overlay
+ */
+declare function Backdrop({ open, onClick, disableClick, lockScroll, variant, className, children, ...props }: BackdropProps): react_jsx_runtime.JSX.Element | null;
+
+interface DialogProps {
+    /** Whether the dialog is open */
+    open: boolean;
+    /** Called when the user confirms */
+    onConfirm: () => void;
+    /** Called when the user cancels */
+    onCancel: () => void;
+    /** Dialog title */
+    title: string;
+    /** Message or content */
+    message: string | ReactNode;
+    /** Confirm button label */
+    confirmLabel?: string;
+    /** Cancel button label */
+    cancelLabel?: string;
+    /** Visual variant */
+    variant?: 'default' | 'danger';
+    /** Show loading state on confirm button */
+    loading?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Dialog — confirmation dialog built on native <dialog>.
+ *
+ * Accessibility:
+ * - Uses native <dialog> for built-in focus trapping and Escape handling
  * - aria-labelledby links to the title
- * - Scrim click closes the drawer
- * - Healthcare note: use drawers for patient detail views, order entry,
- *   and contextual forms that don't require full-page navigation
+ * - aria-describedby links to the message
+ * - Focus moves to cancel button on open (safe default)
+ * - Escape key closes the dialog
+ * - Backdrop click cancels
  */
-declare function Drawer({ open, onClose, title, size, position, footer, className, children, }: DrawerProps): react_jsx_runtime.JSX.Element;
+declare function Dialog({ open, onConfirm, onCancel, title, message, confirmLabel, cancelLabel, variant, loading, className, }: DialogProps): react_jsx_runtime.JSX.Element;
 
-interface DataGridColumn<T = Record<string, unknown>> {
-    /** Unique key for the column, used as the data accessor */
-    key: string;
-    /** Column header label */
-    header: ReactNode;
-    /** Custom render function for cell content */
-    render?: (value: unknown, row: T, rowIndex: number) => ReactNode;
-    /** Whether this column is sortable */
-    sortable?: boolean;
-    /** Column width (CSS value) */
-    width?: string | number;
-    /** Text alignment */
-    align?: 'left' | 'center' | 'right';
+interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
+    /** Optional icon displayed above the title */
+    icon?: ReactNode;
+    /** Title text */
+    title: string;
+    /** Descriptive text below the title */
+    description?: string;
+    /** Optional action element (e.g., a button) */
+    action?: ReactNode;
 }
-type SortDirection = 'asc' | 'desc';
-interface DataGridProps<T = Record<string, unknown>> extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
-    /** Column definitions */
-    columns: DataGridColumn<T>[];
-    /** Data array */
-    data: T[];
-    /** Enable row selection with checkboxes */
-    selectable?: boolean;
-    /** Callback when selection changes, receives array of selected row indices */
-    onSelectionChange?: (selectedIndices: number[]) => void;
-    /** Currently selected row indices (controlled) */
-    selectedRows?: number[];
-    /** Current sort column key */
-    sortColumn?: string;
-    /** Current sort direction */
-    sortDirection?: SortDirection;
-    /** Callback when a sortable column header is clicked */
-    onSort?: (column: string, direction: SortDirection) => void;
-    /** Show loading skeleton */
-    loading?: boolean;
-    /** Message shown when data is empty */
-    emptyMessage?: string;
-    /** Row density */
-    density?: 'default' | 'compact' | 'comfortable';
-    /** Sticky header */
-    stickyHeader?: boolean;
-    /** Striped rows */
-    striped?: boolean;
-    /** Callback when a row is clicked */
-    onRowClick?: (row: T, index: number) => void;
+/**
+ * EmptyState — centered placeholder for empty tables, lists, or views.
+ *
+ * Accessibility:
+ * - Uses semantic heading and paragraph elements
+ * - Healthcare note: provide clear, actionable guidance in empty states
+ *   (e.g., "No patients match your filters. Try adjusting your search.")
+ */
+declare function EmptyState({ icon, title, description, action, className, ...props }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+interface ErrorStateProps extends HTMLAttributes<HTMLDivElement> {
+    /** Error title */
+    title?: string;
+    /** Descriptive message */
+    description?: string;
+    /** Custom icon (defaults to a warning icon) */
+    icon?: ReactNode;
+    /** Retry action element (e.g., a button) */
+    action?: ReactNode;
+    /** Error code or reference for support */
+    errorCode?: string;
 }
 /**
- * DataGrid — composable data grid built on Table primitives.
+ * ErrorState — centered error placeholder with retry action.
+ *
+ * Composes: Typography
+ *
+ * Use in place of content when a data fetch fails, a page errors,
+ * or a section cannot render. Provides clear messaging, an optional
+ * error code for support, and a retry action.
  *
  * Accessibility:
- * - Built on semantic Table components (table/thead/tbody/tr/th/td)
- * - Sortable columns use aria-sort
- * - Selection checkboxes include accessible labels
- * - Loading state announced via aria-busy
- * - Healthcare note: designed for patient lists, lab results,
- *   appointment schedules, and other clinical data views
+ * - Uses role="alert" to announce the error to screen readers
+ * - Action button receives focus for quick retry
  */
-declare function DataGrid<T extends Record<string, unknown>>({ columns, data, selectable, onSelectionChange, selectedRows, sortColumn, sortDirection, onSort, loading, emptyMessage, density, stickyHeader, striped, onRowClick, className, ...props }: DataGridProps<T>): react_jsx_runtime.JSX.Element;
+declare function ErrorState({ title, description, icon, action, errorCode, className, ...props }: ErrorStateProps): react_jsx_runtime.JSX.Element;
 
-interface FormFieldProps {
-    /** Label text for the field */
-    label?: string;
-    /** HTML for attribute to associate label with input */
-    htmlFor?: string;
-    /** Mark field as required */
-    required?: boolean;
-    /** Error message string — renders HelperText in error state */
-    error?: string;
-    /** Helper text displayed below the input */
-    helperText?: string;
-    /** The form control element (Input, Select, Textarea, etc.) */
+type ToastStatus = 'info' | 'success' | 'warning' | 'error';
+interface ToastProps {
+    /** Toast message */
+    message: string;
+    /** Optional title */
+    title?: string;
+    /** Status variant */
+    status?: ToastStatus;
+    /** Optional action element */
+    action?: ReactNode;
+    /** Called when toast is closed */
+    onClose: () => void;
+    /** Auto-dismiss duration in ms (0 to disable) */
+    duration?: number;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Toast — transient notification that auto-dismisses.
+ *
+ * Accessibility:
+ * - Uses role="alert" for error/warning (assertive), role="status" for info/success (polite)
+ * - Close button has accessible label
+ * - Auto-dismiss can be disabled for important messages
+ * - Icon + color + text ensures meaning is communicated multiple ways
+ */
+declare function Toast({ message, title, status, action, onClose, duration, className, }: ToastProps): react_jsx_runtime.JSX.Element;
+
+type BannerStatus = 'info' | 'success' | 'warning' | 'error';
+interface BannerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Status variant */
+    status?: BannerStatus;
+    /** Whether the banner can be dismissed */
+    dismissible?: boolean;
+    /** Called when dismiss button is clicked */
+    onDismiss?: () => void;
+    /** Optional action element */
+    action?: ReactNode;
+    /** Banner content */
     children: ReactNode;
-    /** Disabled state — visually dims the field */
-    disabled?: boolean;
-    /** Additional CSS class */
+}
+/**
+ * Banner — full-width banner for page-level messages.
+ *
+ * Accessibility:
+ * - Uses role="alert" for error/warning (assertive announcement)
+ * - Uses role="status" for info/success (polite announcement)
+ * - Icon + color + text ensures meaning is communicated multiple ways
+ * - Dismiss button has accessible label
+ */
+declare function Banner({ status, dismissible, onDismiss, action, children, className, ...props }: BannerProps): react_jsx_runtime.JSX.Element;
+
+interface AccordionItem {
+    /** Unique identifier */
+    id: string;
+    /** Header title */
+    title: string;
+    /** Panel content */
+    content: ReactNode;
+}
+interface AccordionProps {
+    /** Accordion items */
+    items: AccordionItem[];
+    /** Allow multiple panels to be open simultaneously */
+    allowMultiple?: boolean;
+    /** IDs of panels open by default */
+    defaultOpenIds?: string[];
+    /** Additional className */
     className?: string;
 }
 /**
- * FormField — composable wrapper that renders Label + input + HelperText/error.
+ * Accordion — expandable/collapsible content sections.
  *
  * Accessibility:
- * - Generates aria-describedby linking between input and helper/error text
- * - Error messages use role="alert" via HelperText
- * - Required indicator on Label
- * - Disabled state dims the entire field
+ * - Button triggers with aria-expanded and aria-controls
+ * - Content panels have role="region" and aria-labelledby
+ * - Animated expand/collapse with proper height transitions
+ * - Supports single or multiple open panels
  */
-declare function FormField({ label, htmlFor, required, error, helperText, children, disabled, className, }: FormFieldProps): react_jsx_runtime.JSX.Element;
+declare function Accordion({ items, allowMultiple, defaultOpenIds, className }: AccordionProps): react_jsx_runtime.JSX.Element;
 
-interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
-    /** Size of the search control */
-    size?: 'sm' | 'md' | 'lg';
-    /** Error state */
-    error?: boolean;
-    /** Full width */
-    fullWidth?: boolean;
-    /** Callback when clear button is clicked */
-    onClear?: () => void;
-    /** Show the clear button when input has a value */
-    showClearButton?: boolean;
+interface AppBarProps extends HTMLAttributes<HTMLElement> {
+    /** Logo or brand element */
+    logo?: ReactNode;
+    /** Navigation items (center/left area) */
+    children?: ReactNode;
+    /** Action elements on the right (profile, notifications, etc.) */
+    actions?: ReactNode;
 }
 /**
- * SearchField — search input with magnifying glass icon and optional clear button.
+ * AppBar — horizontal top navigation bar for application headers.
  *
  * Accessibility:
- * - Uses role="searchbox" for semantic search intent
- * - Clear button has aria-label for screen readers
- * - Search icon is decorative (aria-hidden)
+ * - Uses <header> with <nav> for semantic structure
+ * - Navigation items should be provided as links or buttons
+ * - Fixed height with clean horizontal layout
  */
-declare const SearchField: react.ForwardRefExoticComponent<SearchFieldProps & react.RefAttributes<HTMLInputElement>>;
+declare function AppBar({ logo, children, actions, className, ...props }: AppBarProps): react_jsx_runtime.JSX.Element;
 
-interface NumberFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'value' | 'prefix'> {
-    /** Current numeric value */
-    value?: number;
-    /** Change handler */
-    onChange?: (value: number) => void;
-    /** Minimum allowed value */
-    min?: number;
-    /** Maximum allowed value */
-    max?: number;
-    /** Increment step */
-    step?: number;
-    /** Size variant */
-    size?: 'sm' | 'md' | 'lg';
-    /** Error state */
-    error?: boolean;
-    /** Prefix text (e.g., "$") */
-    prefix?: string;
-    /** Suffix text (e.g., "mg") */
-    suffix?: string;
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Elevation level */
+    elevation?: 'flat' | 'raised';
+    /** Padding size */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
 }
 /**
- * NumberField — numeric input with increment/decrement buttons.
+ * Card — surface container for grouping related content.
+ *
+ * Composes: Paper
+ *
+ * Card is a constrained Paper preset with two elevation levels and
+ * opinionated padding. Use Paper directly when you need full control
+ * over surface, elevation, and radius.
  *
  * Accessibility:
- * - Uses native input[type="number"] for spinbutton role
- * - Increment/decrement buttons have aria-labels
- * - Buttons are hidden from tab order (input handles keyboard)
- * - min/max constraints are communicated to AT
+ * - Uses semantic HTML; add role="region" + aria-label when card
+ *   represents a distinct content section
+ * - Border provides separation independent of shadow (not shadow alone)
  */
-declare const NumberField: react.ForwardRefExoticComponent<NumberFieldProps & react.RefAttributes<HTMLInputElement>>;
+declare function Card({ elevation, padding, className, children, ...props }: CardProps): react_jsx_runtime.JSX.Element;
 
-interface CheckboxGroupOption {
-    value: string;
-    label: string;
-    disabled?: boolean;
+interface ModalProps {
+    /** Additional className */
+    className?: string;
+    /** Whether the modal is visible */
+    open: boolean;
+    /** Called when the modal should close */
+    onClose: () => void;
+    /** Modal title (rendered in header) */
+    title: ReactNode;
+    /** Max width */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Footer actions */
+    footer?: ReactNode;
 }
-interface CheckboxGroupProps {
-    /** Group label rendered as fieldset legend */
-    label: string;
-    /** Shared name attribute for all checkboxes */
-    name: string;
-    /** Array of checkbox options */
-    options: CheckboxGroupOption[];
-    /** Currently selected values */
-    value?: string[];
-    /** Change handler — receives updated array of selected values */
-    onChange?: (value: string[]) => void;
-    /** Error message */
-    error?: string;
-    /** Layout direction */
-    orientation?: 'vertical' | 'horizontal';
-    /** Disabled state for all checkboxes */
-    disabled?: boolean;
-    /** Additional CSS class */
+/**
+ * Modal / Dialog — overlay dialog for focused interactions.
+ *
+ * Accessibility:
+ * - Uses native <dialog> element for built-in focus trapping and Escape handling
+ * - aria-labelledby links to the title
+ * - Focus is moved into the dialog on open
+ * - Escape key closes the dialog
+ * - Scrim click closes the dialog
+ * - Healthcare note: for destructive actions (e.g., cancel appointment,
+ *   delete record), always include clear confirmation language in the
+ *   dialog and use danger-variant buttons
+ */
+declare function Modal({ open, onClose, title, size, footer, className, children }: ModalProps & {
+    children?: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+interface PaperProps extends HTMLAttributes<HTMLDivElement> {
+    /** Surface background */
+    surface?: 'default' | 'subtle' | 'canvas' | 'raised' | 'overlay';
+    /** Elevation level (shadow depth) */
+    elevation?: 0 | 1 | 2 | 3 | 4;
+    /** Border radius preset */
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Whether to render a border */
+    bordered?: boolean;
+    /** Padding preset */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    /** Render as a different HTML element */
+    as?: 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer';
+}
+/**
+ * Paper — the foundational surface primitive.
+ *
+ * Paper provides a styled surface (background, border, shadow, radius)
+ * without any layout opinions. It is the atom from which Card, Modal
+ * content areas, Drawer panels, and other surface components compose.
+ *
+ * Accessibility:
+ * - Paper is a visual primitive with no semantic role by default
+ * - Use the `as` prop to select the correct semantic element
+ * - Add `role` and `aria-label` when the surface represents a landmark
+ */
+declare const Paper: react.ForwardRefExoticComponent<PaperProps & react.RefAttributes<HTMLDivElement>>;
+
+interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
+    /** Trigger element that opens the popover */
+    trigger: ReactNode;
+    /** Content rendered inside the popover */
+    content: ReactNode;
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Placement relative to the trigger */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /** Alignment along the placement axis */
+    align?: 'start' | 'center' | 'end';
+}
+/**
+ * Popover — positioned overlay content triggered by a reference element.
+ *
+ * Accessibility:
+ * - Escape key closes the popover
+ * - Focus is managed: moves into popover on open, returns on close
+ * - Click outside closes the popover
+ * - Healthcare note: use for additional context like patient quick-view,
+ *   medication details, or field-level help without navigating away
+ */
+declare function Popover({ trigger, content, open: controlledOpen, onOpenChange, placement, align, className, ...props }: PopoverProps): react_jsx_runtime.JSX.Element;
+
+interface CollapsiblePanelProps {
+    /** Panel title */
+    title: string;
+    /** Whether panel is open by default (uncontrolled) */
+    defaultOpen?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes */
+    onToggle?: (open: boolean) => void;
+    /** Panel content */
+    children: ReactNode;
+    /** Additional className */
     className?: string;
 }
 /**
- * CheckboxGroup — group of checkboxes with fieldset/legend for accessibility.
+ * CollapsiblePanel — a single collapsible section with animated expand/collapse.
  *
  * Accessibility:
- * - Uses <fieldset> and <legend> for semantic grouping
- * - Error message linked via role="alert"
- * - Each checkbox is individually focusable
+ * - Button trigger with aria-expanded
+ * - Content region with aria-labelledby linking to the trigger
+ * - Chevron icon rotates on expand/collapse
+ * - Supports both controlled and uncontrolled modes
  */
-declare function CheckboxGroup({ label, name, options, value, onChange, error, orientation, disabled, className, }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
+declare function CollapsiblePanel({ title, defaultOpen, open: controlledOpen, onToggle, children, className, }: CollapsiblePanelProps): react_jsx_runtime.JSX.Element;
 
-interface RadioGroupOption {
-    value: string;
+interface BreadcrumbItem {
+    /** Display label */
     label: string;
-    disabled?: boolean;
+    /** Optional URL for link items */
+    href?: string;
+    /** Optional click handler */
+    onClick?: () => void;
 }
-interface RadioGroupProps {
-    /** Group label rendered as fieldset legend */
-    label: string;
-    /** Shared name attribute for all radios */
-    name: string;
-    /** Array of radio options */
-    options: RadioGroupOption[];
-    /** Currently selected value */
-    value?: string;
-    /** Change handler — receives the selected value */
-    onChange?: (value: string) => void;
-    /** Error message */
-    error?: string;
-    /** Layout direction */
-    orientation?: 'vertical' | 'horizontal';
-    /** Disabled state for all radios */
-    disabled?: boolean;
-    /** Additional CSS class */
+interface BreadcrumbsProps {
+    /** Breadcrumb path items */
+    items: BreadcrumbItem[];
+    /** Separator between items */
+    separator?: ReactNode;
+    /** Additional className */
     className?: string;
 }
 /**
- * RadioGroup — group of radio buttons with fieldset/legend for accessibility.
+ * Breadcrumbs — navigational aid showing the current location within a hierarchy.
  *
  * Accessibility:
- * - Uses <fieldset> and <legend> for semantic grouping
- * - Arrow keys navigate between radios within the group
- * - Error message rendered with role="alert"
+ * - Wrapped in <nav> with aria-label="Breadcrumb"
+ * - Uses semantic <ol>/<li> list structure
+ * - Last item has aria-current="page" to indicate current location
+ * - Separator is aria-hidden so screen readers skip it
  */
-declare function RadioGroup({ label, name, options, value, onChange, error, orientation, disabled, className, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+declare function Breadcrumbs({ items, separator, className }: BreadcrumbsProps): react_jsx_runtime.JSX.Element;
 
-interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'value'> {
-    /** Current value */
-    value?: number;
-    /** Change handler */
-    onChange?: (value: number) => void;
-    /** Minimum value */
-    min?: number;
-    /** Maximum value */
-    max?: number;
-    /** Step increment */
-    step?: number;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Size variant */
-    size?: 'sm' | 'md';
-    /** Accessible label text */
-    label?: string;
-    /** Show current value next to the slider */
-    showValue?: boolean;
-    /** Additional CSS class */
+interface DrawerProps {
+    /** Additional className */
     className?: string;
+    /** Whether the drawer is visible */
+    open: boolean;
+    /** Called when the drawer should close */
+    onClose: () => void;
+    /** Drawer title */
+    title: ReactNode;
+    /** Width preset */
+    size?: 'sm' | 'md' | 'lg';
+    /** Which side the drawer slides from */
+    position?: 'left' | 'right';
+    /** Footer actions */
+    footer?: ReactNode;
+    /** Drawer body content */
+    children?: ReactNode;
 }
 /**
- * Slider — range input with custom styling.
+ * Drawer — side panel overlay for detail views and forms.
  *
  * Accessibility:
- * - Uses native input[type="range"] for full keyboard and AT support
- * - Label linked via htmlFor/id
- * - aria-valuemin, aria-valuemax, aria-valuenow communicated natively
- * - showValue provides visual readout of current value
+ * - Uses native <dialog> element for focus trapping
+ * - Escape key closes the drawer
+ * - aria-labelledby links to the title
+ * - Scrim click closes the drawer
+ * - Healthcare note: use drawers for patient detail views, order entry,
+ *   and contextual forms that don't require full-page navigation
  */
-declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLInputElement>>;
+declare function Drawer({ open, onClose, title, size, position, footer, className, children, }: DrawerProps): react_jsx_runtime.JSX.Element;
 
-interface FileUploadProps {
-    /** Accepted file types (e.g., ".pdf,.jpg,image/*") */
-    accept?: string;
-    /** Allow multiple files */
-    multiple?: boolean;
-    /** Max file size in bytes */
-    maxSize?: number;
-    /** Callback when files are selected or dropped */
-    onFilesSelected?: (files: File[]) => void;
-    /** Disabled state */
+interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Visual variant */
+    variant?: 'default' | 'subtle' | 'standalone';
+    /** Color */
+    color?: 'primary' | 'secondary' | 'inherit';
+    /** Whether to show an external indicator */
+    external?: boolean;
+    /** Icon slot (leading) */
+    startIcon?: ReactNode;
+    /** Disabled state (prevents navigation) */
     disabled?: boolean;
-    /** Error message */
-    error?: string;
-    /** Additional CSS class */
-    className?: string;
 }
 /**
- * FileUpload — dropzone for file upload with click and drag support.
+ * Link — styled anchor primitive for navigation.
+ *
+ * Variants:
+ * - `default` — underlined inline link
+ * - `subtle` — underline on hover only
+ * - `standalone` — no underline, bolder weight, for navigation items
  *
  * Accessibility:
- * - Keyboard accessible via Enter/Space to open file dialog
- * - Uses role="button" on the dropzone
- * - aria-describedby links to instructions
- * - File list announced after selection
+ * - Uses native <a> element for full keyboard + screen reader support
+ * - External links get target="_blank" with rel="noopener noreferrer"
+ * - aria-disabled prevents interaction without removing from tab order
  */
-declare function FileUpload({ accept, multiple, maxSize, onFilesSelected, disabled, error, className, }: FileUploadProps): react_jsx_runtime.JSX.Element;
+declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
 
-interface OTPInputProps {
-    /** Number of OTP digits */
-    length?: number;
-    /** Current value string */
-    value?: string;
-    /** Change handler — receives the full OTP string */
-    onChange?: (value: string) => void;
-    /** Error state */
-    error?: boolean;
+interface MenuItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
+    /** Leading icon */
+    icon?: ReactNode;
+    /** Trailing content (shortcut, badge, etc.) */
+    trailing?: ReactNode;
     /** Disabled state */
     disabled?: boolean;
-    /** Auto-focus first input on mount */
-    autoFocus?: boolean;
-    /** Additional CSS class */
-    className?: string;
+    /** Destructive / danger styling */
+    danger?: boolean;
+    /** Click handler */
+    onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+}
+declare function MenuItem({ icon, trailing, disabled, danger, onClick, className, children, ...props }: MenuItemProps): react_jsx_runtime.JSX.Element;
+declare function MenuDivider(): react_jsx_runtime.JSX.Element;
+interface MenuGroupProps {
+    /** Group label */
+    label: string;
+    children: ReactNode;
 }
-/**
- * OTPInput — code/OTP input with separate boxes that auto-advance.
- *
- * Accessibility:
- * - Each digit input has aria-label describing its position
- * - Supports keyboard navigation (Backspace moves to previous)
- * - Paste support fills all boxes at once
- * - Error state communicated via aria-invalid
- */
-declare function OTPInput({ length, value, onChange, error, disabled, autoFocus, className, }: OTPInputProps): react_jsx_runtime.JSX.Element;
-
-interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
-    /** Size variant */
-    size?: 'sm' | 'md' | 'lg';
-    /** Error state */
-    error?: boolean;
-    /** Full width */
-    fullWidth?: boolean;
-    /** Minimum date (ISO format YYYY-MM-DD) */
-    min?: string;
-    /** Maximum date (ISO format YYYY-MM-DD) */
-    max?: string;
+declare function MenuGroup({ label, children }: MenuGroupProps): react_jsx_runtime.JSX.Element;
+interface MenuProps extends HTMLAttributes<HTMLDivElement> {
+    /** The trigger element — a single React element */
+    trigger: ReactNode;
+    /** Horizontal alignment relative to trigger */
+    align?: 'start' | 'end';
+    /** Menu width */
+    width?: number | 'trigger';
 }
 /**
- * DatePicker — styled native date input for consistent appearance.
+ * Menu — dropdown action menu surface.
+ *
+ * Composes MenuItem, MenuDivider, and MenuGroup as children.
  *
  * Accessibility:
- * - Uses native input[type="date"] for built-in AT support
- * - Date picker popup provided by the browser
- * - aria-invalid signals error state
- * - Consistent sizing with other Aegis form controls
+ * - role="menu" on the dropdown, role="menuitem" on each item
+ * - Arrow-key navigation between items
+ * - Escape closes the menu
+ * - Focus returns to trigger on close
+ * - Click outside closes the menu
+ * - Healthcare note: ideal for patient action menus, record options,
+ *   context menus on rows
  */
-declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLInputElement>>;
+declare function Menu({ trigger, align, width, className, children, ...props }: MenuProps): react_jsx_runtime.JSX.Element;
 
-interface MultiSelectOption {
-    value: string;
-    label: string;
-}
-interface MultiSelectProps {
-    /** Available options */
-    options: MultiSelectOption[];
-    /** Currently selected values */
-    value?: string[];
-    /** Change handler — receives updated array of selected values */
-    onChange?: (value: string[]) => void;
-    /** Placeholder text */
-    placeholder?: string;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Error state */
-    error?: boolean;
+interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+    /** Current active page (1-based) */
+    currentPage: number;
+    /** Total number of pages */
+    totalPages: number;
+    /** Callback when page changes */
+    onPageChange: (page: number) => void;
+    /** Number of sibling pages to show around the current page */
+    siblingCount?: number;
     /** Size variant */
-    size?: 'sm' | 'md' | 'lg';
-    /** Maximum number of tags visible before showing "+N more" */
-    maxDisplayedTags?: number;
-    /** Additional CSS class */
-    className?: string;
+    size?: 'sm' | 'md';
 }
 /**
- * MultiSelect — multi-value select with tags and dropdown checkboxes.
+ * Pagination — page navigation for paginated data.
  *
  * Accessibility:
- * - Uses role="combobox" with aria-expanded
- * - Dropdown uses role="listbox" with role="option" items
- * - Tags are removable via keyboard (Backspace removes last)
- * - Escape closes dropdown, focus remains on control
+ * - Wraps in <nav> with aria-label="Pagination"
+ * - Current page indicated with aria-current="page"
+ * - Previous/Next buttons disabled at boundaries
+ * - Healthcare note: use pagination for patient lists, lab results,
+ *   and audit logs to keep pages manageable
  */
-declare function MultiSelect({ options, value, onChange, placeholder, disabled, error, size, maxDisplayedTags, className, }: MultiSelectProps): react_jsx_runtime.JSX.Element;
+declare function Pagination({ currentPage, totalPages, onPageChange, siblingCount, size, className, ...props }: PaginationProps): react_jsx_runtime.JSX.Element | null;
 
-interface AutocompleteOption {
-    value: string;
+interface SideNavItem {
+    /** Display label */
     label: string;
+    /** Optional URL */
+    href?: string;
+    /** Optional click handler */
+    onClick?: () => void;
+    /** Optional icon element */
+    icon?: ReactNode;
+    /** Whether this item is the active/current page */
+    active?: boolean;
+    /** Nested child items */
+    children?: SideNavItem[];
 }
-interface AutocompleteProps {
-    /** Available options */
-    options: AutocompleteOption[];
-    /** Selected value */
-    value?: string;
-    /** Change handler — receives the selected value */
-    onChange?: (value: string) => void;
-    /** Callback when the text input changes */
-    onInputChange?: (inputValue: string) => void;
-    /** Placeholder text */
-    placeholder?: string;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Error state */
-    error?: boolean;
-    /** Size variant */
-    size?: 'sm' | 'md' | 'lg';
-    /** Show a loading spinner in the dropdown */
-    loading?: boolean;
-    /** Text shown when no results match */
-    noResultsText?: string;
-    /** Additional CSS class */
+interface SideNavProps {
+    /** Navigation items */
+    items: SideNavItem[];
+    /** Whether the sidebar is collapsed to icon-only mode */
+    collapsed?: boolean;
+    /** Callback when collapse state changes */
+    onCollapse?: (collapsed: boolean) => void;
+    /** Additional className */
     className?: string;
 }
 /**
- * Autocomplete — combobox input with filtered suggestions dropdown.
+ * SideNav — vertical sidebar navigation for dashboard layouts.
  *
  * Accessibility:
- * - role="combobox" on input with aria-expanded, aria-controls, aria-activedescendant
- * - Dropdown uses role="listbox" with role="option" items
- * - Arrow keys navigate options, Enter selects, Escape closes
- * - Full ARIA combobox pattern per WAI-ARIA 1.2
+ * - Semantic <nav> with <ul>/<li> structure
+ * - aria-current="page" on the active item
+ * - Collapse toggle button with aria-label
+ * - Title attribute on items when collapsed for tooltip-style labels
+ * - Nested items rendered as sub-lists for proper hierarchy
  */
-declare function Autocomplete({ options, value, onChange, onInputChange, placeholder, disabled, error, size, loading, noResultsText, className, }: AutocompleteProps): react_jsx_runtime.JSX.Element;
+declare function SideNav({ items, collapsed, onCollapse, className }: SideNavProps): react_jsx_runtime.JSX.Element;
 
 interface StepperStep {
     label: string;
@@ -1257,196 +1770,389 @@ interface StepperProps {
  */
 declare function Stepper({ steps, activeStep, orientation, onStepClick, className, }: StepperProps): react_jsx_runtime.JSX.Element;
 
-interface AccordionItem {
-    /** Unique identifier */
+interface Tab {
     id: string;
-    /** Header title */
-    title: string;
-    /** Panel content */
+    label: string;
     content: ReactNode;
+    disabled?: boolean;
 }
-interface AccordionProps {
-    /** Accordion items */
-    items: AccordionItem[];
-    /** Allow multiple panels to be open simultaneously */
-    allowMultiple?: boolean;
-    /** IDs of panels open by default */
-    defaultOpenIds?: string[];
-    /** Additional className */
+interface TabsProps {
+    /** Tab definitions */
+    tabs: Tab[];
+    /** Controlled active tab id */
+    activeTab?: string;
+    /** Callback when tab changes */
+    onTabChange?: (id: string) => void;
+    /** Additional className for the wrapper */
     className?: string;
 }
 /**
- * Accordion — expandable/collapsible content sections.
+ * Tabs — tabbed interface for switching between content panels.
  *
  * Accessibility:
- * - Button triggers with aria-expanded and aria-controls
- * - Content panels have role="region" and aria-labelledby
- * - Animated expand/collapse with proper height transitions
- * - Supports single or multiple open panels
+ * - Full WAI-ARIA tabs pattern: role="tablist", role="tab", role="tabpanel"
+ * - Arrow key navigation between tabs
+ * - Home/End keys jump to first/last tab
+ * - aria-selected, aria-controls, aria-labelledby for AT relationships
+ * - Only active panel is in the tab order (tabIndex=0 on active tab)
  */
-declare function Accordion({ items, allowMultiple, defaultOpenIds, className }: AccordionProps): react_jsx_runtime.JSX.Element;
+declare function Tabs({ tabs, activeTab, onTabChange, className }: TabsProps): react_jsx_runtime.JSX.Element;
 
-interface BreadcrumbItem {
+interface CommandItem {
+    /** Unique identifier */
+    id: string;
     /** Display label */
     label: string;
-    /** Optional URL for link items */
-    href?: string;
-    /** Optional click handler */
-    onClick?: () => void;
+    /** Optional description shown below the label */
+    description?: string;
+    /** Leading icon */
+    icon?: ReactNode;
+    /** Group/category name */
+    group?: string;
+    /** Keyboard shortcut hint */
+    shortcut?: string;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Custom search keywords (in addition to label) */
+    keywords?: string[];
 }
-interface BreadcrumbsProps {
-    /** Breadcrumb path items */
-    items: BreadcrumbItem[];
-    /** Separator between items */
-    separator?: ReactNode;
-    /** Additional className */
+interface CommandPaletteProps {
+    /** Whether the palette is open */
+    open: boolean;
+    /** Called when the palette should close */
+    onClose: () => void;
+    /** Available commands */
+    items: CommandItem[];
+    /** Called when a command is selected */
+    onSelect: (item: CommandItem) => void;
+    /** Placeholder text for the search input */
+    placeholder?: string;
+    /** Empty state message */
+    emptyMessage?: string;
+    /** Additional className for the overlay */
     className?: string;
 }
 /**
- * Breadcrumbs — navigational aid showing the current location within a hierarchy.
+ * CommandPalette — keyboard-driven command search dialog (Cmd+K pattern).
+ *
+ * Renders a modal search input with filterable command list,
+ * grouped results, keyboard navigation, and shortcut hints.
  *
  * Accessibility:
- * - Wrapped in <nav> with aria-label="Breadcrumb"
- * - Uses semantic <ol>/<li> list structure
- * - Last item has aria-current="page" to indicate current location
- * - Separator is aria-hidden so screen readers skip it
+ * - Uses combobox + listbox ARIA pattern
+ * - Arrow keys navigate items, Enter selects
+ * - Escape closes the palette
+ * - Focus is trapped within the dialog
+ * - aria-activedescendant tracks highlighted item
  */
-declare function Breadcrumbs({ items, separator, className }: BreadcrumbsProps): react_jsx_runtime.JSX.Element;
+declare const CommandPalette: react.ForwardRefExoticComponent<CommandPaletteProps & react.RefAttributes<HTMLDivElement>>;
 
-interface SideNavItem {
-    /** Display label */
-    label: string;
-    /** Optional URL */
-    href?: string;
-    /** Optional click handler */
-    onClick?: () => void;
-    /** Optional icon element */
-    icon?: ReactNode;
-    /** Whether this item is the active/current page */
-    active?: boolean;
-    /** Nested child items */
-    children?: SideNavItem[];
+interface FormFieldProps {
+    /** Label text for the field */
+    label?: string;
+    /** HTML for attribute to associate label with input */
+    htmlFor?: string;
+    /** Mark field as required */
+    required?: boolean;
+    /** Error message string — renders HelperText in error state */
+    error?: string;
+    /** Helper text displayed below the input */
+    helperText?: string;
+    /** The form control element (Input, Select, Textarea, etc.) */
+    children: ReactNode;
+    /** Disabled state — visually dims the field */
+    disabled?: boolean;
+    /** Additional CSS class */
+    className?: string;
 }
-interface SideNavProps {
-    /** Navigation items */
-    items: SideNavItem[];
-    /** Whether the sidebar is collapsed to icon-only mode */
-    collapsed?: boolean;
-    /** Callback when collapse state changes */
-    onCollapse?: (collapsed: boolean) => void;
+/**
+ * FormField — composable wrapper that renders Label + input + HelperText/error.
+ *
+ * Accessibility:
+ * - Generates aria-describedby linking between input and helper/error text
+ * - Error messages use role="alert" via HelperText
+ * - Required indicator on Label
+ * - Disabled state dims the entire field
+ */
+declare function FormField({ label, htmlFor, required, error, helperText, children, disabled, className, }: FormFieldProps): react_jsx_runtime.JSX.Element;
+
+interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Max-width preset */
+    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Horizontal padding */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    /** Center the container horizontally */
+    centered?: boolean;
+    /** Render as a different HTML element */
+    as?: ElementType;
+}
+/**
+ * Container — max-width content wrapper with responsive padding.
+ *
+ * Provides consistent horizontal padding and a constrained max-width
+ * for page-level content sections.
+ *
+ * Accessibility:
+ * - Purely presentational — no ARIA roles needed
+ * - Use semantic HTML elements via the `as` prop (e.g., main, section)
+ */
+declare const Container: react.ForwardRefExoticComponent<ContainerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    /** Number of columns (1-12) or 'auto' for auto-fill */
+    columns?: number | 'auto';
+    /** Gap between grid items */
+    gap?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Minimum item width when columns='auto' */
+    minItemWidth?: number;
+    /** Align items vertically */
+    alignItems?: 'start' | 'center' | 'end' | 'stretch';
+}
+/**
+ * Grid — CSS grid layout primitive.
+ *
+ * Provides a responsive grid with preset column counts or auto-fill
+ * behavior based on minimum item width.
+ *
+ * Accessibility:
+ * - Purely presentational — no ARIA roles needed
+ * - Grid layout does not affect reading order for screen readers
+ */
+declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>>;
+
+interface StackProps extends HTMLAttributes<HTMLDivElement> {
+    /** Stack direction */
+    direction?: 'vertical' | 'horizontal';
+    /** Gap between items */
+    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Align items on the cross axis */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    /** Justify items on the main axis */
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around';
+    /** Whether items should wrap */
+    wrap?: boolean;
+    /** Render as a different HTML element */
+    as?: ElementType;
+}
+/**
+ * Stack — flex layout primitive for vertical or horizontal spacing.
+ *
+ * The most common layout component: arranges children with consistent
+ * gaps. Defaults to a vertical stack (column).
+ *
+ * Accessibility:
+ * - Purely presentational — no ARIA roles needed
+ * - Use semantic HTML via `as` prop when appropriate
+ */
+declare const Stack: react.ForwardRefExoticComponent<StackProps & react.RefAttributes<HTMLDivElement>>;
+
+interface InputGroupProps {
+    /** Content rendered before the input (e.g., icon, label, currency symbol) */
+    startAddon?: ReactNode;
+    /** Content rendered after the input (e.g., icon, button, unit label) */
+    endAddon?: ReactNode;
+    /** Size variant — matches TextField sizes */
+    size?: 'sm' | 'md' | 'lg';
+    /** Error state */
+    error?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
     /** Additional className */
     className?: string;
+    /** Input element */
+    children: ReactNode;
 }
 /**
- * SideNav — vertical sidebar navigation for dashboard layouts.
+ * InputGroup — wrapper that adds prefix/suffix addons to an input.
+ *
+ * Wraps a TextField (or other input) with leading/trailing elements
+ * like icons, currency symbols, units, or action buttons.
  *
  * Accessibility:
- * - Semantic <nav> with <ul>/<li> structure
- * - aria-current="page" on the active item
- * - Collapse toggle button with aria-label
- * - Title attribute on items when collapsed for tooltip-style labels
- * - Nested items rendered as sub-lists for proper hierarchy
+ * - Addons are presentational and should not duplicate input labels
+ * - Use aria-describedby on the input to associate addon context
  */
-declare function SideNav({ items, collapsed, onCollapse, className }: SideNavProps): react_jsx_runtime.JSX.Element;
+declare function InputGroup({ startAddon, endAddon, size, error, disabled, className, children, }: InputGroupProps): react_jsx_runtime.JSX.Element;
 
-interface TopNavProps extends HTMLAttributes<HTMLElement> {
-    /** Logo or brand element */
-    logo?: ReactNode;
-    /** Navigation items (center/left area) */
-    children?: ReactNode;
-    /** Action elements on the right (profile, notifications, etc.) */
-    actions?: ReactNode;
+interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Size variant — affects padding and child button sizing */
+    size?: 'sm' | 'md';
+    /** Visual variant */
+    variant?: 'default' | 'outlined';
+    /** Toolbar content (buttons, groups, dividers) */
+    children: ReactNode;
+}
+interface ToolbarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Group content */
+    children: ReactNode;
+}
+interface ToolbarDividerProps extends HTMLAttributes<HTMLDivElement> {
 }
 /**
- * TopNav — horizontal top navigation bar for application headers.
+ * Toolbar — horizontal action bar with grouped controls.
+ *
+ * Use with ToolbarGroup to visually separate related actions
+ * and ToolbarDivider for explicit separators.
  *
  * Accessibility:
- * - Uses <header> with <nav> for semantic structure
- * - Navigation items should be provided as links or buttons
- * - Fixed height with clean horizontal layout
+ * - Uses toolbar ARIA role
+ * - Children should be buttons or controls with labels
  */
-declare function TopNav({ logo, children, actions, className, ...props }: TopNavProps): react_jsx_runtime.JSX.Element;
+declare const Toolbar: react.ForwardRefExoticComponent<ToolbarProps & react.RefAttributes<HTMLDivElement>>;
+declare const ToolbarGroup: react.ForwardRefExoticComponent<ToolbarGroupProps & react.RefAttributes<HTMLDivElement>>;
+declare const ToolbarDivider: react.ForwardRefExoticComponent<ToolbarDividerProps & react.RefAttributes<HTMLDivElement>>;
 
-interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
-    /** Metric label */
-    label: string;
-    /** Metric value */
-    value: string | number;
-    /** Percentage change */
-    change?: number;
-    /** Label for the change (e.g. "vs last month") */
-    changeLabel?: string;
-    /** Trend direction */
-    trend?: 'up' | 'down' | 'neutral';
-    /** Optional icon */
-    icon?: ReactNode;
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    /** Mark the field as required — adds visual indicator */
+    required?: boolean;
+}
+/**
+ * Label — form field label.
+ *
+ * Accessibility:
+ * - Always associate with an input via htmlFor
+ * - Required indicator uses both visual (*) and sr-only text
+ */
+declare function Label({ required, className, children, ...props }: LabelProps): react_jsx_runtime.JSX.Element;
+
+interface HelperTextProps extends HTMLAttributes<HTMLParagraphElement> {
+    /** Render as error message */
+    error?: boolean;
 }
 /**
- * StatCard — displays a key metric with optional trend indicator.
+ * HelperText — descriptive or error text beneath a form field.
  *
  * Accessibility:
- * - Trend icons are aria-hidden; meaning conveyed via visible text
- * - Uses semantic structure with clear label/value relationship
- * - sr-only text describes trend for screen readers
+ * - Link to input via aria-describedby on the input, matching this element's id
+ * - Error messages use role="alert" for immediate screen reader announcement
+ * - Error state uses both color and icon (not color alone)
  */
-declare function StatCard({ label, value, change, changeLabel, trend, icon, className, ...props }: StatCardProps): react_jsx_runtime.JSX.Element;
+declare function HelperText({ error, className, children, ...props }: HelperTextProps): react_jsx_runtime.JSX.Element;
 
-interface ListProps extends HTMLAttributes<HTMLUListElement> {
-    /** Show dividers between items */
-    divided?: boolean;
-    /** Padding inside list items */
-    padding?: 'none' | 'sm' | 'md';
+interface VisuallyHiddenProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Render as a different element */
+    as?: 'span' | 'div' | 'label';
+}
+/**
+ * VisuallyHidden — renders content that is hidden visually but accessible
+ * to screen readers and other assistive technology.
+ *
+ * Use for:
+ * - Labels for icon-only buttons
+ * - Additional context for screen readers
+ * - Skip navigation links
+ * - Form labels that are visually unnecessary but needed for a11y
+ *
+ * This uses the standard screen-reader-only CSS technique that keeps
+ * content in the document flow for assistive tech while hiding it
+ * from sighted users.
+ */
+declare function VisuallyHidden({ as: Component, children, ...props }: VisuallyHiddenProps): react_jsx_runtime.JSX.Element;
+
+interface PortalProps {
+    /** Content to render in the portal */
+    children: ReactNode;
+    /** Target container element (defaults to document.body) */
+    container?: Element | null;
+    /** Whether the portal is active (renders inline when false) */
+    disabled?: boolean;
+}
+/**
+ * Portal — renders children into a DOM node outside the parent hierarchy.
+ *
+ * Use for overlays, tooltips, modals, and other floating content that
+ * needs to escape stacking context or overflow constraints.
+ *
+ * Falls back to inline rendering during SSR or when disabled.
+ *
+ * Accessibility:
+ * - Portal does not affect the accessibility tree
+ * - Focus management is the responsibility of the portal content
+ * - Ensure ARIA relationships (aria-describedby, aria-labelledby)
+ *   still work across the portal boundary
+ */
+declare function Portal({ children, container, disabled }: PortalProps): react_jsx_runtime.JSX.Element;
+
+interface DataGridColumn<T = Record<string, unknown>> {
+    /** Unique key for the column, used as the data accessor */
+    key: string;
+    /** Column header label */
+    header: ReactNode;
+    /** Custom render function for cell content */
+    render?: (value: unknown, row: T, rowIndex: number) => ReactNode;
+    /** Whether this column is sortable */
+    sortable?: boolean;
+    /** Column width (CSS value) */
+    width?: string | number;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+}
+type SortDirection = 'asc' | 'desc';
+interface DataGridProps<T = Record<string, unknown>> extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** Column definitions */
+    columns: DataGridColumn<T>[];
+    /** Data array */
+    data: T[];
+    /** Enable row selection with checkboxes */
+    selectable?: boolean;
+    /** Callback when selection changes, receives array of selected row indices */
+    onSelectionChange?: (selectedIndices: number[]) => void;
+    /** Currently selected row indices (controlled) */
+    selectedRows?: number[];
+    /** Current sort column key */
+    sortColumn?: string;
+    /** Current sort direction */
+    sortDirection?: SortDirection;
+    /** Callback when a sortable column header is clicked */
+    onSort?: (column: string, direction: SortDirection) => void;
+    /** Show loading skeleton */
+    loading?: boolean;
+    /** Message shown when data is empty */
+    emptyMessage?: string;
+    /** Row density */
+    density?: 'default' | 'compact' | 'comfortable';
+    /** Sticky header */
+    stickyHeader?: boolean;
+    /** Striped rows */
+    striped?: boolean;
+    /** Callback when a row is clicked */
+    onRowClick?: (row: T, index: number) => void;
 }
 /**
- * List — composable list container for displaying groups of items.
+ * DataGrid — composable data grid built on Table primitives.
  *
  * Accessibility:
- * - Uses semantic <ul>/<li> structure
- * - Interactive items rendered as buttons for keyboard access
- * - Disabled items use aria-disabled
- * - Selected items use aria-selected
+ * - Built on semantic Table components (table/thead/tbody/tr/th/td)
+ * - Sortable columns use aria-sort
+ * - Selection checkboxes include accessible labels
+ * - Loading state announced via aria-busy
+ * - Healthcare note: designed for patient lists, lab results,
+ *   appointment schedules, and other clinical data views
  */
-declare const List: react.ForwardRefExoticComponent<ListProps & react.RefAttributes<HTMLUListElement>>;
-interface ListItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'prefix'> {
-    /** Click handler — makes the item interactive */
-    onClick?: () => void;
-    /** Whether this item is selected */
-    selected?: boolean;
-    /** Whether this item is disabled */
-    disabled?: boolean;
-    /** Leading element (icon, avatar, etc.) */
-    prefix?: ReactNode;
-    /** Trailing element (badge, action button, etc.) */
-    suffix?: ReactNode;
-    /** Secondary description text */
-    description?: string;
-}
-declare const ListItem: react.ForwardRefExoticComponent<ListItemProps & react.RefAttributes<HTMLLIElement>>;
+declare function DataGrid<T extends Record<string, unknown>>({ columns, data, selectable, onSelectionChange, selectedRows, sortColumn, sortDirection, onSort, loading, emptyMessage, density, stickyHeader, striped, onRowClick, className, ...props }: DataGridProps<T>): react_jsx_runtime.JSX.Element;
 
-interface CollapsiblePanelProps {
-    /** Panel title */
-    title: string;
-    /** Whether panel is open by default (uncontrolled) */
-    defaultOpen?: boolean;
-    /** Controlled open state */
-    open?: boolean;
-    /** Callback when open state changes */
-    onToggle?: (open: boolean) => void;
-    /** Panel content */
-    children: ReactNode;
-    /** Additional className */
-    className?: string;
+interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Error state */
+    error?: boolean;
+    /** Full width */
+    fullWidth?: boolean;
+    /** Minimum date (ISO format YYYY-MM-DD) */
+    min?: string;
+    /** Maximum date (ISO format YYYY-MM-DD) */
+    max?: string;
 }
 /**
- * CollapsiblePanel — a single collapsible section with animated expand/collapse.
+ * DatePicker — styled native date input for consistent appearance.
  *
  * Accessibility:
- * - Button trigger with aria-expanded
- * - Content region with aria-labelledby linking to the trigger
- * - Chevron icon rotates on expand/collapse
- * - Supports both controlled and uncontrolled modes
+ * - Uses native input[type="date"] for built-in AT support
+ * - Date picker popup provided by the browser
+ * - aria-invalid signals error state
+ * - Consistent sizing with other Aegis form controls
  */
-declare function CollapsiblePanel({ title, defaultOpen, open: controlledOpen, onToggle, children, className, }: CollapsiblePanelProps): react_jsx_runtime.JSX.Element;
+declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLInputElement>>;
 
 type PatientStatus = 'active' | 'inactive' | 'critical';
 interface PatientCardProps extends HTMLAttributes<HTMLDivElement> {
@@ -1460,7 +2166,12 @@ interface PatientCardProps extends HTMLAttributes<HTMLDivElement> {
     age: number;
     /** Patient gender */
     gender: string;
-    /** Avatar element */
+    /** Avatar image URL (preferred) */
+    avatarSrc?: string;
+    /**
+     * @deprecated Use `avatarSrc` instead. Accepts a custom ReactNode for the avatar slot.
+     * When both `avatar` and `avatarSrc` are provided, `avatarSrc` takes precedence.
+     */
     avatar?: ReactNode;
     /** Patient status */
     status?: PatientStatus;
@@ -1472,12 +2183,14 @@ interface PatientCardProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * PatientCard — summary card displaying patient demographics and key info.
  *
+ * Composes: Card, Avatar, Badge, Typography, Chip, Divider
+ *
  * Accessibility:
  * - Uses role="region" with aria-label for screen readers
  * - Status communicated via text, not color alone
- * - Allergy list uses semantic <ul> element
+ * - Allergy list uses Chip components with semantic markup
  */
-declare function PatientCard({ name, mrn, dob, age, gender, avatar, status, allergies, primaryPhysician, className, ...props }: PatientCardProps): react_jsx_runtime.JSX.Element;
+declare function PatientCard({ name, mrn, dob, age, gender, avatarSrc, avatar, status, allergies, primaryPhysician, className, ...props }: PatientCardProps): react_jsx_runtime.JSX.Element;
 
 type AppointmentStatus = 'scheduled' | 'checked-in' | 'in-progress' | 'completed' | 'cancelled' | 'no-show';
 interface AppointmentCardProps extends HTMLAttributes<HTMLDivElement> {
@@ -1499,41 +2212,14 @@ interface AppointmentCardProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * AppointmentCard — displays appointment summary with status indicator.
  *
+ * Composes: Card, StatusBadge, Typography
+ *
  * Accessibility:
  * - Uses role="region" with aria-label for context
  * - Status conveyed via text label, not color alone
  */
 declare function AppointmentCard({ patientName, date, time, type, provider, status, location, className, ...props }: AppointmentCardProps): react_jsx_runtime.JSX.Element;
 
-type TimelineItemVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
-interface TimelineItem {
-    /** Unique identifier */
-    id: string;
-    /** Event title */
-    title: string;
-    /** Optional description */
-    description?: string;
-    /** Timestamp display string */
-    timestamp: string;
-    /** Optional icon to replace the default dot */
-    icon?: ReactNode;
-    /** Visual variant */
-    variant?: TimelineItemVariant;
-}
-interface TimelineProps extends HTMLAttributes<HTMLOListElement> {
-    /** Timeline items in chronological order */
-    items: TimelineItem[];
-}
-/**
- * Timeline — vertical timeline for displaying sequential events.
- *
- * Accessibility:
- * - Uses semantic <ol> for ordered event sequence
- * - Each event is an <li> for proper list semantics
- * - Icons are decorative (aria-hidden)
- */
-declare function Timeline({ items, className, ...props }: TimelineProps): react_jsx_runtime.JSX.Element;
-
 type ClinicalSeverity = 'critical' | 'high' | 'moderate' | 'low';
 interface ClinicalBannerProps extends HTMLAttributes<HTMLDivElement> {
     /** Severity level */
@@ -1550,10 +2236,14 @@ interface ClinicalBannerProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * ClinicalBanner — prominent banner for critical clinical alerts.
  *
+ * Composes: Banner, Typography
+ *
+ * Wraps the core Banner component with healthcare-specific severity semantics
+ * (critical / high / moderate / low) and an enhanced left-border accent.
+ *
  * Accessibility:
- * - Uses role="alert" for immediate screen reader announcement
+ * - Inherits Banner's role="alert" for urgent statuses
  * - Icon + color + text ensures meaning is communicated multiple ways
- * - Dismiss button has accessible label
  */
 declare function ClinicalBanner({ severity, title, dismissible, onDismiss, children, className, ...props }: ClinicalBannerProps): react_jsx_runtime.JSX.Element;
 
@@ -1579,8 +2269,9 @@ interface MedicationRowProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * MedicationRow — compact horizontal display of medication details.
  *
+ * Composes: StatusBadge, Typography
+ *
  * Accessibility:
- * - Uses role="row" semantics through div structure
  * - Status communicated via text label, not color alone
  * - All information is available as text content for screen readers
  */
@@ -1604,6 +2295,8 @@ interface LabResultRowProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * LabResultRow — displays a single lab test result with visual status indicator.
  *
+ * Composes: Badge, Typography
+ *
  * Accessibility:
  * - Status conveyed via text label ("High", "Low", "Critical"), not color alone
  * - Arrow indicators are supplementary (aria-hidden)
@@ -1632,99 +2325,348 @@ interface InsuranceCardProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * InsuranceCard — displays insurance plan summary information.
  *
+ * Composes: Card, Badge, Typography, DescriptionList, Divider
+ *
  * Accessibility:
  * - Uses role="region" with aria-label for screen reader context
  * - Status communicated via text label, not color alone
- * - Structured layout for easy scanning
+ * - DescriptionList provides semantic label-value pairs
  */
 declare function InsuranceCard({ planName, memberId, groupNumber, planType, status, effectiveDate, expirationDate, className, ...props }: InsuranceCardProps): react_jsx_runtime.JSX.Element;
 
-type ToastStatus = 'info' | 'success' | 'warning' | 'error';
-interface ToastProps {
-    /** Toast message */
-    message: string;
-    /** Optional title */
-    title?: string;
-    /** Status variant */
-    status?: ToastStatus;
-    /** Optional action element */
-    action?: ReactNode;
-    /** Called when toast is closed */
-    onClose: () => void;
-    /** Auto-dismiss duration in ms (0 to disable) */
-    duration?: number;
-    /** Additional class name */
-    className?: string;
+type ChartCardState = 'ready' | 'loading' | 'empty' | 'error';
+interface ChartCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Card title (e.g. "30-day patient adherence") */
+    title?: ReactNode;
+    /** Optional subtitle / explanation */
+    subtitle?: ReactNode;
+    /** Headline metric displayed prominently in the header */
+    metric?: ReactNode;
+    /** Trend chip beside the metric (use the Aegis Badge or any node) */
+    trend?: ReactNode;
+    /** Optional actions (filters, export, etc.) rendered in the header */
+    actions?: ReactNode;
+    /** Footer content rendered below the chart body */
+    footer?: ReactNode;
+    /** Visual padding density */
+    density?: 'comfortable' | 'compact';
+    /** Render state — controls whether children, loader, empty, or error renders */
+    state?: ChartCardState;
+    /** Custom empty-state node */
+    emptyState?: ReactNode;
+    /** Custom loading-state node */
+    loadingState?: ReactNode;
+    /** Custom error-state node */
+    errorState?: ReactNode;
+    /** Optional aria-label for the chart region */
+    ariaLabel?: string;
 }
 /**
- * Toast — transient notification that auto-dismisses.
+ * ChartCard — the unifying shell for every Aegis chart component.
  *
- * Accessibility:
- * - Uses role="alert" for error/warning (assertive), role="status" for info/success (polite)
- * - Close button has accessible label
- * - Auto-dismiss can be disabled for important messages
- * - Icon + color + text ensures meaning is communicated multiple ways
+ * Provides a consistent header (title, subtitle, headline metric, trend chip,
+ * actions), body slot, footer slot, and built-in loading / empty / error states.
+ *
+ * Every chart component in Aegis composes this card so the system feels
+ * cohesive and developers get visual states for free.
  */
-declare function Toast({ message, title, status, action, onClose, duration, className, }: ToastProps): react_jsx_runtime.JSX.Element;
+declare function ChartCard({ title, subtitle, metric, trend, actions, footer, density, state, emptyState, loadingState, errorState, ariaLabel, className, children, ...props }: ChartCardProps): react_jsx_runtime.JSX.Element;
 
-interface ConfirmDialogProps {
-    /** Whether the dialog is open */
-    open: boolean;
-    /** Called when the user confirms */
-    onConfirm: () => void;
-    /** Called when the user cancels */
-    onCancel: () => void;
-    /** Dialog title */
-    title: string;
-    /** Message or content */
-    message: string | ReactNode;
-    /** Confirm button label */
-    confirmLabel?: string;
-    /** Cancel button label */
-    cancelLabel?: string;
-    /** Visual variant */
-    variant?: 'default' | 'danger';
-    /** Show loading state on confirm button */
-    loading?: boolean;
-    /** Additional class name */
-    className?: string;
+/**
+ * Skyfall Aegis — Chart Theme
+ *
+ * Centralized theme tokens for all Recharts-based components.
+ * Reads from CSS custom properties so chart visuals stay in sync with
+ * the rest of the Aegis design system.
+ */
+/**
+ * The Aegis chart series palette. Order is intentional — earlier colors
+ * are used first so simple charts always pull from the most credible,
+ * brand-aligned hues before moving into supporting accents.
+ */
+declare const aegisSeriesPalette: readonly ["var(--aegis-data-vis-1)", "var(--aegis-data-vis-2)", "var(--aegis-data-vis-3)", "var(--aegis-data-vis-4)", "var(--aegis-data-vis-5)"];
+/**
+ * Resolve a series color by index, wrapping the palette if more series
+ * exist than available colors. Accepts an explicit override.
+ */
+declare function getSeriesColor(index: number, override?: string): string;
+/**
+ * Token-driven chart theme. Used to style axes, gridlines, tooltips,
+ * legends, etc. so every chart in Aegis feels like part of one system.
+ */
+declare const aegisChartTheme: {
+    readonly axis: {
+        readonly stroke: "var(--aegis-data-vis-axis)";
+        readonly fontSize: 12;
+        readonly fontFamily: "var(--aegis-font-family-sans)";
+        readonly tickColor: "var(--aegis-color-text-muted)";
+    };
+    readonly grid: {
+        readonly stroke: "var(--aegis-data-vis-gridline)";
+        readonly strokeDasharray: "3 3";
+    };
+    readonly tooltip: {
+        readonly background: "var(--aegis-color-surface-overlay)";
+        readonly border: "var(--aegis-color-border-default)";
+        readonly text: "var(--aegis-color-text-primary)";
+        readonly muted: "var(--aegis-color-text-secondary)";
+    };
+    readonly reference: {
+        readonly stroke: "var(--aegis-color-text-muted)";
+        readonly strokeDasharray: "4 4";
+    };
+};
+type ChartSeries<T = Record<string, unknown>> = {
+    /** Property key on the data row that holds the series value */
+    dataKey: keyof T & string;
+    /** Display label for tooltip / legend */
+    label?: string;
+    /** Optional explicit color (defaults to Aegis palette) */
+    color?: string;
+};
+type ValueFormatter = (value: number | string) => string;
+/** Default number formatter — locale-aware, with sensible compact behavior */
+declare const defaultValueFormatter: ValueFormatter;
+
+interface ChartTooltipProps extends TooltipProps$1<number, string> {
+    /** Optional formatter for displayed values */
+    valueFormatter?: ValueFormatter;
+    /** Optional formatter for the tooltip label (e.g. axis category) */
+    labelFormatter?: (label: string) => string;
 }
 /**
- * ConfirmDialog — confirmation dialog built on native <dialog>.
+ * Aegis-styled tooltip used by every chart in the system.
  *
- * Accessibility:
- * - Uses native <dialog> for built-in focus trapping and Escape handling
- * - aria-labelledby links to the title
- * - aria-describedby links to the message
- * - Focus moves to cancel button on open (safe default)
- * - Escape key closes the dialog
- * - Backdrop click cancels
+ * Pass directly to Recharts `<Tooltip content={<ChartTooltip />} />`.
  */
-declare function ConfirmDialog({ open, onConfirm, onCancel, title, message, confirmLabel, cancelLabel, variant, loading, className, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
+declare function ChartTooltip({ active, payload, label, valueFormatter, labelFormatter, }: ChartTooltipProps): react_jsx_runtime.JSX.Element | null;
 
-type BannerStatus = 'info' | 'success' | 'warning' | 'error';
-interface BannerProps extends HTMLAttributes<HTMLDivElement> {
-    /** Status variant */
-    status?: BannerStatus;
-    /** Whether the banner can be dismissed */
-    dismissible?: boolean;
-    /** Called when dismiss button is clicked */
-    onDismiss?: () => void;
-    /** Optional action element */
-    action?: ReactNode;
-    /** Banner content */
-    children: ReactNode;
+/**
+ * Aegis-styled chart legend. Pass to Recharts via:
+ *   <Legend content={<ChartLegend />} />
+ */
+declare function ChartLegend({ payload }: LegendProps): react_jsx_runtime.JSX.Element | null;
+
+interface LineChartProps<T extends Record<string, unknown>> extends Omit<ChartCardProps, 'children'> {
+    /** Row-shaped data — each row represents one x-axis category */
+    data: T[];
+    /** Property name on each row used for the x-axis */
+    xKey: keyof T & string;
+    /** One or more series definitions */
+    series: ChartSeries<T>[];
+    /** Chart height in pixels (defaults to 280) */
+    height?: number;
+    /** Show legend (defaults to true when more than one series) */
+    showLegend?: boolean;
+    /** Show grid (defaults to true) */
+    showGrid?: boolean;
+    /** Format values in tooltip / axis */
+    valueFormatter?: ValueFormatter;
+    /** Optional reference line value(s) (e.g. target threshold) */
+    referenceLines?: {
+        value: number;
+        label?: string;
+    }[];
+    /** Smooth curves (defaults to true) */
+    smooth?: boolean;
 }
 /**
- * Banner — full-width banner for page-level messages.
+ * Aegis LineChart — wraps Recharts with Aegis tokens, shell, and states.
+ *
+ * Time-series and trend visualization for dashboards. Pair with KpiStatCard
+ * for headline metrics or use standalone in a ChartCard layout.
+ */
+declare function LineChart<T extends Record<string, unknown>>({ data, xKey, series, height, showLegend, showGrid, valueFormatter, referenceLines, smooth, state, ...cardProps }: LineChartProps<T>): react_jsx_runtime.JSX.Element;
+
+interface AreaChartProps<T extends Record<string, unknown>> extends Omit<ChartCardProps, 'children'> {
+    data: T[];
+    xKey: keyof T & string;
+    series: ChartSeries<T>[];
+    height?: number;
+    showLegend?: boolean;
+    showGrid?: boolean;
+    /** Stack areas (false = overlapping) */
+    stacked?: boolean;
+    valueFormatter?: ValueFormatter;
+    referenceLines?: {
+        value: number;
+        label?: string;
+    }[];
+}
+/**
+ * Aegis AreaChart — for cumulative trend / volume visualization.
+ *
+ * Set `stacked` to true to stack series on top of each other (e.g. cohort
+ * composition over time).
+ */
+declare function AreaChart<T extends Record<string, unknown>>({ data, xKey, series, height, showLegend, showGrid, stacked, valueFormatter, referenceLines, state, ...cardProps }: AreaChartProps<T>): react_jsx_runtime.JSX.Element;
+
+interface BarChartProps<T extends Record<string, unknown>> extends Omit<ChartCardProps, 'children'> {
+    data: T[];
+    xKey: keyof T & string;
+    series: ChartSeries<T>[];
+    height?: number;
+    showLegend?: boolean;
+    showGrid?: boolean;
+    /** Stack bars (renders as a stacked bar chart) */
+    stacked?: boolean;
+    /** Render bars horizontally */
+    horizontal?: boolean;
+    valueFormatter?: ValueFormatter;
+    referenceLines?: {
+        value: number;
+        label?: string;
+    }[];
+}
+/**
+ * Aegis BarChart — for categorical comparisons.
+ *
+ * Set `stacked` for stacked bars, `horizontal` for horizontal layout
+ * (better for long category labels).
+ */
+declare function BarChart<T extends Record<string, unknown>>({ data, xKey, series, height, showLegend, showGrid, stacked, horizontal, valueFormatter, referenceLines, state, ...cardProps }: BarChartProps<T>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Aegis StackedBarChart — convenience wrapper around BarChart with
+ * `stacked` enabled by default. Use this when stacking is the default
+ * intent (e.g. cohort breakdown over time).
+ */
+declare function StackedBarChart<T extends Record<string, unknown>>(props: Omit<BarChartProps<T>, 'stacked'>): react_jsx_runtime.JSX.Element;
+
+interface DonutChartDatum {
+    /** Display label for the slice */
+    name: string;
+    /** Numeric value */
+    value: number;
+    /** Optional explicit color (defaults to Aegis palette) */
+    color?: string;
+}
+interface DonutChartProps extends Omit<ChartCardProps, 'children'> {
+    data: DonutChartDatum[];
+    /** Center label (e.g. total value) */
+    centerLabel?: string;
+    /** Center sublabel (e.g. "patients") */
+    centerSublabel?: string;
+    /** Render as full pie instead of donut */
+    variant?: 'donut' | 'pie';
+    /** Chart height (defaults to 280) */
+    height?: number;
+    /** Format slice values in tooltip */
+    valueFormatter?: ValueFormatter;
+    /** Show legend list to the right of the chart */
+    showLegend?: boolean;
+}
+/**
+ * Aegis DonutChart — for distribution / part-to-whole comparisons.
+ *
+ * Center label/sublabel slots support headline metrics inside the donut.
+ * For pie semantics, set `variant="pie"`.
+ */
+declare function DonutChart({ data, centerLabel, centerSublabel, variant, height, valueFormatter, showLegend, state, ...cardProps }: DonutChartProps): react_jsx_runtime.JSX.Element;
+
+interface SparklineProps {
+    /** Array of numeric values OR row objects */
+    data: number[] | Record<string, unknown>[];
+    /** Property name when `data` is row-shaped (defaults to "value") */
+    dataKey?: string;
+    /** Render style */
+    variant?: 'line' | 'area';
+    /** Width in px (defaults to 120) — accepts any CSS length */
+    width?: number | string;
+    /** Height in px (defaults to 36) */
+    height?: number | string;
+    /** Line/area color (defaults to first Aegis series color) */
+    color?: string;
+    /** Stroke width (defaults to 2) */
+    strokeWidth?: number;
+    /** Optional accessible label */
+    ariaLabel?: string;
+}
+/**
+ * Aegis Sparkline — minimal inline trend chart for KPIs and table cells.
+ *
+ * Pure visual: no axes, grid, tooltip, or legend. Designed to live inside
+ * stat cards, data grid cells, and dense dashboard surfaces.
+ */
+declare function Sparkline({ data, dataKey, variant, width, height, color, strokeWidth, ariaLabel, }: SparklineProps): react_jsx_runtime.JSX.Element;
+
+type TrendDirection = 'up' | 'down' | 'neutral';
+interface KpiStatCardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Metric label (e.g. "Active patients") */
+    label: string;
+    /** Headline value (e.g. 1284 or "98.2%") */
+    value: ReactNode;
+    /** Optional unit/suffix shown next to the value */
+    unit?: ReactNode;
+    /** Percent change (number) — positive renders as up, negative as down */
+    change?: number;
+    /** Label for the change context (e.g. "vs last 30 days") */
+    changeLabel?: string;
+    /** Override trend direction (otherwise inferred from `change`) */
+    trend?: TrendDirection;
+    /**
+     * For success-positive metrics, set `inverse` to flip color semantics
+     * (e.g. "wait time" — a decrease is good).
+     */
+    inverse?: boolean;
+    /** Optional icon rendered top-right */
+    icon?: ReactNode;
+    /** Optional sparkline data — when present, renders an inline trend chart */
+    sparklineData?: SparklineProps['data'];
+    /** Sparkline color override */
+    sparklineColor?: string;
+    /** Sparkline render variant */
+    sparklineVariant?: SparklineProps['variant'];
+    /** Density variant */
+    density?: 'comfortable' | 'compact';
+}
+/**
+ * KpiStatCard — premium stat card with optional inline sparkline.
+ *
+ * The chart-aware evolution of StatCard. Use for headline KPIs in
+ * dashboards. Pair with `inverse` for metrics where a decrease is positive
+ * (e.g. wait time, error rate).
  *
  * Accessibility:
- * - Uses role="alert" for error/warning (assertive announcement)
- * - Uses role="status" for info/success (polite announcement)
- * - Icon + color + text ensures meaning is communicated multiple ways
- * - Dismiss button has accessible label
+ * - Trend icons are aria-hidden; meaning is conveyed in visible text plus an
+ *   sr-only direction phrase.
+ * - Sparkline accepts `aria-label` for screen reader trend description.
  */
-declare function Banner({ status, dismissible, onDismiss, action, children, className, ...props }: BannerProps): react_jsx_runtime.JSX.Element;
+declare function KpiStatCard({ label, value, unit, change, changeLabel, trend, inverse, icon, sparklineData, sparklineColor, sparklineVariant, density, className, ...props }: KpiStatCardProps): react_jsx_runtime.JSX.Element;
+
+interface TrendStatCardProps<T extends Record<string, unknown>> extends HTMLAttributes<HTMLDivElement> {
+    /** Metric label (e.g. "30-day readmissions") */
+    label: string;
+    /** Headline value */
+    value: ReactNode;
+    /** Optional unit (e.g. "%", "patients") */
+    unit?: ReactNode;
+    /** Trend chart data — row-shaped */
+    data: T[];
+    /** X-axis key on each row */
+    xKey: keyof T & string;
+    /** Y value key on each row */
+    yKey: keyof T & string;
+    /** Percent change value */
+    change?: number;
+    /** Change context label */
+    changeLabel?: string;
+    /** Inverse semantics — set true when a decrease is "good" */
+    inverse?: boolean;
+    /** Color override for the trend area */
+    color?: string;
+    /** Format values shown in tooltip */
+    valueFormatter?: ValueFormatter;
+    /** Chart height (defaults to 80) */
+    chartHeight?: number;
+}
+/**
+ * TrendStatCard — KPI card with a prominent trend chart underneath.
+ *
+ * Larger than KpiStatCard's inline sparkline, designed to fill more space
+ * in dashboard rows where a trend story is the primary message.
+ */
+declare function TrendStatCard<T extends Record<string, unknown>>({ label, value, unit, data, xKey, yKey, change, changeLabel, inverse, color, valueFormatter, chartHeight, className, ...props }: TrendStatCardProps<T>): react_jsx_runtime.JSX.Element;
 
 /** Merge CSS module class names, filtering out falsy values */
 declare function cn(...classes: (string | false | null | undefined)[]): string;
@@ -1733,4 +2675,4 @@ type Size = 'sm' | 'md' | 'lg';
 type Status = 'success' | 'warning' | 'error' | 'info';
 type Variant = 'primary' | 'secondary' | 'ghost' | 'danger';
 
-export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, AppointmentCard, type AppointmentCardProps, type AppointmentStatus, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Banner, type BannerProps, type BannerStatus, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, ClinicalBanner, type ClinicalBannerProps, type ClinicalSeverity, CollapsiblePanel, type CollapsiblePanelProps, ConfirmDialog, type ConfirmDialogProps, DataGrid, type DataGridColumn, type DataGridProps, DatePicker, type DatePickerProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, Divider, type DividerProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, FileUpload, type FileUploadProps, FormField, type FormFieldProps, HelperText, type HelperTextProps, IconButton, type IconButtonProps, Input, type InputProps, InsuranceCard, type InsuranceCardProps, type InsurancePlanType, type InsuranceStatus, LabResultRow, type LabResultRowProps, type LabResultStatus, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, MedicationRow, type MedicationRowProps, type MedicationStatus, Modal, type ModalProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, NumberField, type NumberFieldProps, OTPInput, type OTPInputProps, Pagination, type PaginationProps, PatientCard, type PatientCardProps, type PatientStatus, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, SearchField, type SearchFieldProps, Select, type SelectProps, SideNav, type SideNavItem, type SideNavProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, type SortDirection, Spinner, type SpinnerProps, StatCard, type StatCardProps, type Status, StatusBadge, type StatusBadgeProps, type StatusBadgeStatus, Stepper, type StepperProps, type StepperStep, Switch, type SwitchProps, type Tab, Table, TableBody, TableCell, TableHead, TableHeaderCell, type TableProps, TableRow, Tabs, type TabsProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineItemVariant, type TimelineProps, Toast, type ToastProps, type ToastStatus, Tooltip, type TooltipProps, TopNav, type TopNavProps, type Variant, accentTeal, border, borderStyle, borderWidth, brandPrimary, cn, container, controlSize, dataVis, duration, easing, focusRing, fontFamily, fontSize, fontWeight, grid, iconSize, lineHeight, modalSize, neutral, opacity, radius, semantic, shadow, sidebarDefault, space, surface, text, touchMin, tracking, zIndex };
+export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, AppBar, type AppBarProps, AppointmentCard, type AppointmentCardProps, type AppointmentStatus, AreaChart, type AreaChartProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, type AvatarProps, Backdrop, type BackdropProps, Badge, type BadgeProps, Banner, type BannerProps, type BannerStatus, BarChart, type BarChartProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, ChartCard, type ChartCardProps, type ChartCardState, ChartLegend, type ChartSeries, ChartTooltip, type ChartTooltipProps, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, ClinicalBanner, type ClinicalBannerProps, type ClinicalSeverity, CollapsiblePanel, type CollapsiblePanelProps, ColorPicker, type ColorPickerProps, type CommandItem, CommandPalette, type CommandPaletteProps, Container, type ContainerProps, DataGrid, type DataGridColumn, type DataGridProps, DatePicker, type DatePickerProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, Dialog, type DialogProps, Divider, type DividerProps, DonutChart, type DonutChartDatum, type DonutChartProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, FileUpload, type FileUploadProps, FormField, type FormFieldProps, Grid, type GridProps, HelperText, type HelperTextProps, IconButton, type IconButtonProps, InputGroup, type InputGroupProps, InsuranceCard, type InsuranceCardProps, type InsurancePlanType, type InsuranceStatus, Kbd, type KbdProps, KpiStatCard, type KpiStatCardProps, LabResultRow, type LabResultRowProps, type LabResultStatus, Label, type LabelProps, LineChart, type LineChartProps, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, MedicationRow, type MedicationRowProps, type MedicationStatus, Menu, MenuDivider, MenuGroup, type MenuGroupProps, MenuItem, type MenuItemProps, type MenuProps, Modal, type ModalProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, NumberField, type NumberFieldProps, OTPInput, type OTPInputProps, Pagination, type PaginationProps, Paper, type PaperProps, PatientCard, type PatientCardProps, type PatientStatus, Popover, type PopoverProps, Portal, type PortalProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, Rating, type RatingProps, SearchField, type SearchFieldProps, Select, type SelectProps, SideNav, type SideNavItem, type SideNavProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, type SortDirection, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackProps, StackedBarChart, type BarChartProps as StackedBarChartProps, type Status, StatusBadge, type StatusBadgeProps, type StatusBadgeStatus, Stepper, type StepperProps, type StepperStep, Switch, type SwitchProps, type Tab, Table, TableBody, TableCell, TableHead, TableHeaderCell, type TableProps, TableRow, Tabs, type TabsProps, TagInput, type TagInputProps, TextField, type TextFieldProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineItemVariant, type TimelineProps, Toast, type ToastProps, type ToastStatus, Toolbar, ToolbarDivider, type ToolbarDividerProps, ToolbarGroup, type ToolbarGroupProps, type ToolbarProps, Tooltip, type TooltipProps, type TreeNode, TreeView, type TreeViewProps, type TrendDirection, TrendStatCard, type TrendStatCardProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type ValueFormatter, type Variant, VisuallyHidden, type VisuallyHiddenProps, accentTeal, aegisChartTheme, aegisSeriesPalette, border, borderStyle, borderWidth, brandPrimary, cn, container, controlSize, dataVis, defaultValueFormatter, duration, easing, focusRing, fontFamily, fontSize, fontWeight, getSeriesColor, grid, iconSize, lineHeight, modalSize, neutral, opacity, radius, semantic, shadow, sidebarDefault, space, surface, text, touchMin, tracking, zIndex };