@skyfall_ai/aegis 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,1736 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, LabelHTMLAttributes, HTMLAttributes, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** Brand primary palette */
+declare const brandPrimary: {
+    readonly 50: "#EEF4FF";
+    readonly 100: "#DCE8FF";
+    readonly 200: "#BED4FF";
+    readonly 300: "#8FB7FF";
+    readonly 400: "#5C92F2";
+    readonly 500: "#2F6FE4";
+    readonly 600: "#1F5CCD";
+    readonly 700: "#1849A6";
+    readonly 800: "#153B82";
+    readonly 900: "#112E63";
+};
+/** Support accent — teal */
+declare const accentTeal: {
+    readonly 50: "#EDF9F8";
+    readonly 100: "#D4F1EE";
+    readonly 200: "#A9E0D9";
+    readonly 300: "#77C9BE";
+    readonly 400: "#48AE9F";
+    readonly 500: "#2E8F83";
+    readonly 600: "#237368";
+    readonly 700: "#1D5D54";
+};
+/** Neutral palette */
+declare const neutral: {
+    readonly 0: "#FFFFFF";
+    readonly 25: "#FCFDFE";
+    readonly 50: "#F6F8FA";
+    readonly 100: "#EDF1F5";
+    readonly 200: "#DCE3EA";
+    readonly 300: "#C1CBD6";
+    readonly 400: "#93A1B2";
+    readonly 500: "#66768A";
+    readonly 600: "#4B5B6C";
+    readonly 700: "#334155";
+    readonly 800: "#223042";
+    readonly 900: "#16202B";
+};
+/** Semantic colors */
+declare const semantic: {
+    readonly success: {
+        readonly 50: "#EEF8F1";
+        readonly 500: "#2F8F57";
+        readonly 700: "#1F6B3D";
+    };
+    readonly warning: {
+        readonly 50: "#FFF6E8";
+        readonly 500: "#B86A00";
+        readonly 700: "#8D4F00";
+    };
+    readonly error: {
+        readonly 50: "#FFF0F0";
+        readonly 500: "#C23A3A";
+        readonly 700: "#8F2626";
+    };
+    readonly info: {
+        readonly 50: "#EEF6FF";
+        readonly 500: "#2563B8";
+        readonly 700: "#1B4C8E";
+    };
+};
+/** Text aliases */
+declare const text: {
+    readonly primary: "#16202B";
+    readonly secondary: "#4B5B6C";
+    readonly muted: "#66768A";
+    readonly inverse: "#FFFFFF";
+};
+/** Surface aliases */
+declare const surface: {
+    readonly canvas: "#FCFDFE";
+    readonly default: "#FFFFFF";
+    readonly subtle: "#F6F8FA";
+    readonly raised: "#FFFFFF";
+};
+/** Border aliases */
+declare const border: {
+    readonly default: "#DCE3EA";
+    readonly strong: "#C1CBD6";
+    readonly inverse: "#334155";
+};
+/** Data visualization */
+declare const dataVis: {
+    readonly 1: "#2F6FE4";
+    readonly 2: "#2E8F83";
+    readonly 3: "#7B61C9";
+    readonly 4: "#B86A00";
+    readonly 5: "#C23A3A";
+    readonly gridline: "#DCE3EA";
+    readonly axis: "#66768A";
+};
+
+declare const fontFamily: {
+    readonly sans: "\"Inter\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
+    readonly mono: "\"IBM Plex Mono\", \"SFMono-Regular\", Consolas, monospace";
+};
+declare const fontWeight: {
+    readonly regular: 400;
+    readonly medium: 500;
+    readonly semibold: 600;
+    readonly bold: 700;
+};
+declare const fontSize: {
+    readonly 'display-lg': "40px";
+    readonly 'display-md': "32px";
+    readonly 'heading-xl': "28px";
+    readonly 'heading-lg': "24px";
+    readonly 'heading-md': "20px";
+    readonly 'heading-sm': "18px";
+    readonly 'body-lg': "16px";
+    readonly 'body-md': "14px";
+    readonly 'body-sm': "13px";
+    readonly 'label-lg': "14px";
+    readonly 'label-md': "13px";
+    readonly caption: "12px";
+    readonly data: "14px";
+    readonly code: "13px";
+};
+declare const lineHeight: {
+    readonly 'display-lg': "48px";
+    readonly 'display-md': "40px";
+    readonly 'heading-xl': "36px";
+    readonly 'heading-lg': "32px";
+    readonly 'heading-md': "28px";
+    readonly 'heading-sm': "26px";
+    readonly 'body-lg': "24px";
+    readonly 'body-md': "22px";
+    readonly 'body-sm': "20px";
+    readonly 'label-lg': "20px";
+    readonly 'label-md': "18px";
+    readonly caption: "16px";
+    readonly data: "20px";
+    readonly code: "18px";
+};
+declare const tracking: {
+    readonly tight: "-0.02em";
+    readonly normal: "0em";
+    readonly wide: "0.01em";
+};
+
+declare const space: {
+    readonly 0: "0";
+    readonly 1: "4px";
+    readonly 2: "8px";
+    readonly 3: "12px";
+    readonly 4: "16px";
+    readonly 5: "20px";
+    readonly 6: "24px";
+    readonly 8: "32px";
+    readonly 10: "40px";
+    readonly 12: "48px";
+    readonly 16: "64px";
+    readonly 20: "80px";
+};
+
+declare const controlSize: {
+    readonly sm: "32px";
+    readonly md: "40px";
+    readonly lg: "48px";
+};
+declare const iconSize: {
+    readonly xs: "12px";
+    readonly sm: "16px";
+    readonly md: "20px";
+    readonly lg: "24px";
+};
+declare const touchMin = "44px";
+declare const modalSize: {
+    readonly sm: "400px";
+    readonly md: "560px";
+    readonly lg: "720px";
+    readonly xl: "880px";
+};
+declare const sidebarDefault = "280px";
+
+declare const radius: {
+    readonly none: "0";
+    readonly sm: "6px";
+    readonly md: "10px";
+    readonly lg: "14px";
+    readonly xl: "18px";
+    readonly full: "9999px";
+};
+
+declare const borderWidth: {
+    readonly none: "0";
+    readonly hairline: "1px";
+    readonly medium: "2px";
+    readonly strong: "3px";
+};
+declare const borderStyle: {
+    readonly default: "solid";
+};
+
+declare const shadow: {
+    readonly none: "none";
+    readonly xs: "0 1px 2px rgba(22, 32, 43, 0.05)";
+    readonly sm: "0 1px 3px rgba(22, 32, 43, 0.06), 0 2px 8px rgba(22, 32, 43, 0.04)";
+    readonly md: "0 2px 4px rgba(22, 32, 43, 0.04), 0 8px 20px rgba(22, 32, 43, 0.08)";
+    readonly lg: "0 4px 8px rgba(22, 32, 43, 0.04), 0 16px 40px rgba(22, 32, 43, 0.12)";
+    readonly xl: "0 8px 16px rgba(22, 32, 43, 0.06), 0 24px 56px rgba(22, 32, 43, 0.16)";
+    readonly focus: "0 0 0 3px rgba(47, 111, 228, 0.28)";
+    readonly focusError: "0 0 0 3px rgba(194, 58, 58, 0.2)";
+    readonly focusSuccess: "0 0 0 3px rgba(47, 143, 87, 0.2)";
+    readonly insetXs: "inset 0 1px 2px rgba(22, 32, 43, 0.06)";
+    readonly insetSm: "inset 0 2px 4px rgba(22, 32, 43, 0.08)";
+};
+
+declare const duration: {
+    readonly fast: "120ms";
+    readonly base: "180ms";
+    readonly slow: "240ms";
+};
+declare const easing: {
+    readonly standard: "cubic-bezier(0.2, 0, 0, 1)";
+    readonly emphasized: "cubic-bezier(0.2, 0, 0, 1)";
+    readonly exit: "cubic-bezier(0.4, 0, 1, 1)";
+};
+
+declare const opacity: {
+    readonly disabled: 0.48;
+    readonly subtle: 0.72;
+    readonly overlay: 0.48;
+    readonly scrimStrong: 0.64;
+};
+
+declare const zIndex: {
+    readonly base: 0;
+    readonly dropdown: 1000;
+    readonly sticky: 1100;
+    readonly banner: 1200;
+    readonly overlay: 1300;
+    readonly modal: 1400;
+    readonly toast: 1500;
+    readonly tooltip: 1600;
+};
+
+declare const container: {
+    readonly max: "1280px";
+    readonly reading: "720px";
+};
+declare const grid: {
+    readonly columns: 12;
+    readonly gutter: "24px";
+    readonly margin: {
+        readonly desktop: "32px";
+        readonly tablet: "24px";
+        readonly mobile: "16px";
+    };
+};
+
+declare const focusRing: {
+    readonly width: "3px";
+    readonly color: "rgba(47, 111, 228, 0.28)";
+    readonly offset: "2px";
+    readonly outlineColor: "#2F6FE4";
+};
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual variant */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    /** Size of the button */
+    size?: 'sm' | 'md' | 'lg';
+    /** Full width */
+    fullWidth?: boolean;
+    /** Loading state — disables interaction and shows spinner */
+    loading?: boolean;
+    /** Icon before the label */
+    iconLeft?: ReactNode;
+    /** Icon after the label */
+    iconRight?: ReactNode;
+}
+/**
+ * Button — primary interactive element.
+ *
+ * Accessibility:
+ * - Uses native <button> for keyboard and screen reader support
+ * - aria-disabled used during loading to maintain focusability
+ * - aria-busy signals loading state to assistive technology
+ * - Minimum 44px touch target on md/lg sizes
+ */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Accessible label (required — icon-only buttons need text for screen readers) */
+    'aria-label': string;
+    /** The icon element */
+    icon: ReactNode;
+    /** Visual variant */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    /** Size */
+    size?: 'sm' | 'md' | 'lg';
+}
+/**
+ * IconButton — icon-only interactive button.
+ *
+ * Accessibility:
+ * - aria-label is required to provide screen reader context
+ * - Meets 44px minimum touch target at md/lg sizes
+ */
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Size of the input control */
+    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';
+}
+/**
+ * Textarea — multi-line text input.
+ *
+ * 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.
+ *
+ * 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 CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /** Label text displayed next to the checkbox */
+    label?: string;
+    /** Error state */
+    error?: boolean;
+}
+/**
+ * Checkbox — boolean toggle with label.
+ *
+ * Accessibility:
+ * - Uses native <input type="checkbox"> for full keyboard/screen reader support
+ * - Checkmark is CSS-only, no JS required for visual state
+ * - Label is clickable and linked to input
+ * - 44px minimum touch target maintained via padding
+ */
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /** Label text */
+    label?: string;
+    /** Error state */
+    error?: boolean;
+}
+/**
+ * Radio — single-selection option within a group.
+ *
+ * Accessibility:
+ * - Uses native <input type="radio">
+ * - Wrap multiple Radios in a fieldset with legend for group labeling
+ * - Arrow keys navigate between radios within the same name group
+ */
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+
+interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /** Label text */
+    label?: string;
+}
+/**
+ * Switch — on/off toggle control.
+ *
+ * Accessibility:
+ * - Uses role="switch" with native checkbox for AT support
+ * - aria-checked reflects state
+ * - Label is clickable and linked
+ * - Healthcare note: use for non-critical preferences only.
+ *   For high-risk toggles (e.g., medication alerts), prefer explicit
+ *   confirmation patterns instead.
+ */
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
+
+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;
+}
+/**
+ * HelperText — descriptive or error text beneath a form field.
+ *
+ * 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)
+ */
+declare function HelperText({ error, className, children, ...props }: HelperTextProps): react_jsx_runtime.JSX.Element;
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Elevation level */
+    elevation?: 'flat' | 'raised';
+    /** Padding size */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+/**
+ * Card — surface container for grouping related content.
+ *
+ * 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)
+ */
+declare function Card({ elevation, padding, className, children, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+
+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 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 Tab {
+    id: 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 */
+    className?: string;
+}
+/**
+ * Tabs — tabbed interface for switching between content panels.
+ *
+ * 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)
+ */
+declare function Tabs({ tabs, activeTab, onTabChange, className }: TabsProps): react_jsx_runtime.JSX.Element;
+
+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;
+}
+/**
+ * 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 TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    /** Compact density for admin/operational views */
+    density?: 'default' | 'compact';
+    /** Striped rows for scan-ability */
+    striped?: boolean;
+}
+/**
+ * Table — data table with accessible defaults.
+ *
+ * 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
+ */
+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 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 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;
+
+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;
+
+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;
+
+interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Image source URL */
+    src?: string;
+    /** Alt text for the image */
+    alt?: string;
+    /** Full name used to generate initials fallback */
+    name?: string;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Optional status dot overlay */
+    status?: 'active' | 'inactive' | 'busy' | 'away';
+}
+/**
+ * Avatar — circular user image with initials fallback and optional status.
+ *
+ * Accessibility:
+ * - Image includes alt text when src is provided
+ * - Initials fallback uses aria-label with the full name
+ * - Status dot includes a visually-hidden label
+ * - Healthcare note: use avatars to identify care team members,
+ *   patients, and providers in clinical workflows
+ */
+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 */
+    icon?: ReactNode;
+    /** Title text */
+    title: string;
+    /** Descriptive text below the title */
+    description?: string;
+    /** Optional action element (e.g., a button) */
+    action?: ReactNode;
+}
+/**
+ * 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 ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Current value (0-100) */
+    value: number;
+    /** Maximum value (defaults to 100) */
+    max?: number;
+    /** Size variant */
+    size?: 'sm' | 'md';
+    /** Color variant */
+    variant?: 'default' | 'success' | 'warning' | 'error';
+    /** Visible label text */
+    label?: string;
+    /** Show the numeric value */
+    showValue?: boolean;
+}
+/**
+ * ProgressBar — horizontal bar indicating completion or progress.
+ *
+ * Accessibility:
+ * - role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax
+ * - aria-label derived from the label prop
+ * - 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;
+
+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';
+}
+/**
+ * Pagination — page navigation for paginated data.
+ *
+ * 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
+ */
+declare function Pagination({ currentPage, totalPages, onPageChange, siblingCount, size, className, ...props }: PaginationProps): react_jsx_runtime.JSX.Element | null;
+
+interface DescriptionListItem {
+    /** Label / term */
+    label: ReactNode;
+    /** Value / description */
+    value: ReactNode;
+}
+interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
+    /** Array of label-value pairs */
+    items: DescriptionListItem[];
+    /** Layout mode */
+    layout?: 'vertical' | 'horizontal' | 'grid';
+    /** Number of columns for grid layout */
+    columns?: number;
+}
+/**
+ * DescriptionList — semantic key-value display using dl/dt/dd.
+ *
+ * Accessibility:
+ * - Uses <dl>, <dt>, <dd> semantic HTML
+ * - Screen readers will announce terms and definitions
+ * - Healthcare note: ideal for patient demographics, encounter details,
+ *   and insurance information panels
+ */
+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';
+}
+/**
+ * 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 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;
+}
+/**
+ * Drawer — side panel overlay for detail views and forms.
+ *
+ * Accessibility:
+ * - 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 function Drawer({ open, onClose, title, size, position, footer, className, children, }: DrawerProps): 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;
+}
+/**
+ * DataGrid — composable data grid built on Table primitives.
+ *
+ * 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
+ */
+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 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;
+}
+/**
+ * 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 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;
+}
+/**
+ * SearchField — search input with magnifying glass icon and optional clear button.
+ *
+ * Accessibility:
+ * - Uses role="searchbox" for semantic search intent
+ * - Clear button has aria-label for screen readers
+ * - Search icon is decorative (aria-hidden)
+ */
+declare const SearchField: react.ForwardRefExoticComponent<SearchFieldProps & react.RefAttributes<HTMLInputElement>>;
+
+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;
+}
+/**
+ * NumberField — numeric input with increment/decrement buttons.
+ *
+ * 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
+ */
+declare const NumberField: react.ForwardRefExoticComponent<NumberFieldProps & 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 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 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;
+}
+/**
+ * Slider — range input with custom styling.
+ *
+ * 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
+ */
+declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLInputElement>>;
+
+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;
+}
+/**
+ * FileUpload — dropzone for file upload with click and drag support.
+ *
+ * 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
+ */
+declare function FileUpload({ accept, multiple, maxSize, onFilesSelected, disabled, error, className, }: FileUploadProps): react_jsx_runtime.JSX.Element;
+
+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;
+}
+/**
+ * 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;
+}
+/**
+ * DatePicker — styled native date input for consistent appearance.
+ *
+ * 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
+ */
+declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLInputElement>>;
+
+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;
+}
+/**
+ * MultiSelect — multi-value select with tags and dropdown checkboxes.
+ *
+ * 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
+ */
+declare function MultiSelect({ options, value, onChange, placeholder, disabled, error, size, maxDisplayedTags, className, }: MultiSelectProps): react_jsx_runtime.JSX.Element;
+
+interface AutocompleteOption {
+    value: string;
+    label: string;
+}
+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;
+}
+/**
+ * Autocomplete — combobox input with filtered suggestions dropdown.
+ *
+ * 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
+ */
+declare function Autocomplete({ options, value, onChange, onInputChange, placeholder, disabled, error, size, loading, noResultsText, className, }: AutocompleteProps): react_jsx_runtime.JSX.Element;
+
+interface StepperStep {
+    label: string;
+    description?: string;
+}
+interface StepperProps {
+    /** Array of step definitions */
+    steps: StepperStep[];
+    /** Currently active step (0-indexed) */
+    activeStep: number;
+    /** Layout orientation */
+    orientation?: 'horizontal' | 'vertical';
+    /** Callback when a step is clicked */
+    onStepClick?: (stepIndex: number) => void;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Stepper — multi-step form progress indicator.
+ *
+ * Accessibility:
+ * - Uses role="navigation" with aria-label
+ * - Each step is a button (when clickable) or div with aria-current="step"
+ * - Completed steps indicated via visual checkmark and sr-only text
+ * - Step descriptions provide additional context
+ */
+declare function Stepper({ steps, activeStep, orientation, onStepClick, className, }: StepperProps): 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;
+}
+/**
+ * Accordion — expandable/collapsible content sections.
+ *
+ * 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
+ */
+declare function Accordion({ items, allowMultiple, defaultOpenIds, className }: AccordionProps): react_jsx_runtime.JSX.Element;
+
+interface BreadcrumbItem {
+    /** Display label */
+    label: string;
+    /** Optional URL for link items */
+    href?: string;
+    /** Optional click handler */
+    onClick?: () => void;
+}
+interface BreadcrumbsProps {
+    /** Breadcrumb path items */
+    items: BreadcrumbItem[];
+    /** Separator between items */
+    separator?: ReactNode;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Breadcrumbs — navigational aid showing the current location within a hierarchy.
+ *
+ * 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
+ */
+declare function Breadcrumbs({ items, separator, className }: BreadcrumbsProps): react_jsx_runtime.JSX.Element;
+
+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 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;
+}
+/**
+ * SideNav — vertical sidebar navigation for dashboard layouts.
+ *
+ * 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
+ */
+declare function SideNav({ items, collapsed, onCollapse, className }: SideNavProps): 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;
+}
+/**
+ * TopNav — horizontal top navigation bar for application headers.
+ *
+ * Accessibility:
+ * - Uses <header> with <nav> for semantic structure
+ * - Navigation items should be provided as links or buttons
+ * - Fixed height with clean horizontal layout
+ */
+declare function TopNav({ logo, children, actions, className, ...props }: TopNavProps): react_jsx_runtime.JSX.Element;
+
+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;
+}
+/**
+ * StatCard — displays a key metric with optional trend indicator.
+ *
+ * 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
+ */
+declare function StatCard({ label, value, change, changeLabel, trend, icon, className, ...props }: StatCardProps): 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;
+}
+declare const ListItem: react.ForwardRefExoticComponent<ListItemProps & react.RefAttributes<HTMLLIElement>>;
+
+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;
+}
+/**
+ * CollapsiblePanel — a single collapsible section with animated expand/collapse.
+ *
+ * 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
+ */
+declare function CollapsiblePanel({ title, defaultOpen, open: controlledOpen, onToggle, children, className, }: CollapsiblePanelProps): react_jsx_runtime.JSX.Element;
+
+type PatientStatus = 'active' | 'inactive' | 'critical';
+interface PatientCardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Patient full name */
+    name: string;
+    /** Medical record number */
+    mrn: string;
+    /** Date of birth */
+    dob: string;
+    /** Patient age */
+    age: number;
+    /** Patient gender */
+    gender: string;
+    /** Avatar element */
+    avatar?: ReactNode;
+    /** Patient status */
+    status?: PatientStatus;
+    /** Known allergies */
+    allergies?: string[];
+    /** Primary physician name */
+    primaryPhysician?: string;
+}
+/**
+ * PatientCard — summary card displaying patient demographics and key info.
+ *
+ * Accessibility:
+ * - Uses role="region" with aria-label for screen readers
+ * - Status communicated via text, not color alone
+ * - Allergy list uses semantic <ul> element
+ */
+declare function PatientCard({ name, mrn, dob, age, gender, 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> {
+    /** Patient name */
+    patientName: string;
+    /** Appointment date */
+    date: string;
+    /** Appointment time */
+    time: string;
+    /** Appointment type (e.g., "Follow-up", "New Patient") */
+    type: string;
+    /** Provider / physician name */
+    provider: string;
+    /** Current appointment status */
+    status: AppointmentStatus;
+    /** Location or room */
+    location?: string;
+}
+/**
+ * AppointmentCard — displays appointment summary with status indicator.
+ *
+ * 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 */
+    severity: ClinicalSeverity;
+    /** Banner title */
+    title: string;
+    /** Dismissible banner */
+    dismissible?: boolean;
+    /** Called when dismiss button is clicked */
+    onDismiss?: () => void;
+    /** Detail content */
+    children?: ReactNode;
+}
+/**
+ * ClinicalBanner — prominent banner for critical clinical alerts.
+ *
+ * Accessibility:
+ * - Uses role="alert" for immediate screen reader announcement
+ * - 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;
+
+type MedicationStatus = 'active' | 'discontinued' | 'hold' | 'prn';
+interface MedicationRowProps extends HTMLAttributes<HTMLDivElement> {
+    /** Medication name */
+    name: string;
+    /** Dosage (e.g., "10mg") */
+    dosage: string;
+    /** Frequency (e.g., "Once daily") */
+    frequency: string;
+    /** Route of administration (e.g., "Oral") */
+    route: string;
+    /** Prescribing physician */
+    prescribedBy: string;
+    /** Start date */
+    startDate: string;
+    /** End date */
+    endDate?: string;
+    /** Medication status */
+    status: MedicationStatus;
+}
+/**
+ * MedicationRow — compact horizontal display of medication details.
+ *
+ * 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
+ */
+declare function MedicationRow({ name, dosage, frequency, route, prescribedBy, startDate, endDate, status, className, ...props }: MedicationRowProps): react_jsx_runtime.JSX.Element;
+
+type LabResultStatus = 'normal' | 'abnormal-high' | 'abnormal-low' | 'critical';
+interface LabResultRowProps extends HTMLAttributes<HTMLDivElement> {
+    /** Test name (e.g., "White Blood Cells") */
+    testName: string;
+    /** Result value */
+    value: string | number;
+    /** Unit of measurement (e.g., "K/uL") */
+    unit: string;
+    /** Reference range (e.g., "4.5-11.0") */
+    referenceRange: string;
+    /** Result status */
+    status: LabResultStatus;
+    /** Date collected */
+    collectedDate: string;
+}
+/**
+ * LabResultRow — displays a single lab test result with visual status indicator.
+ *
+ * Accessibility:
+ * - Status conveyed via text label ("High", "Low", "Critical"), not color alone
+ * - Arrow indicators are supplementary (aria-hidden)
+ * - Screen readers receive full context through text content
+ */
+declare function LabResultRow({ testName, value, unit, referenceRange, status, collectedDate, className, ...props }: LabResultRowProps): react_jsx_runtime.JSX.Element;
+
+type InsurancePlanType = 'PPO' | 'HMO' | 'EPO' | 'POS' | 'Medicare' | 'Medicaid' | 'Other';
+type InsuranceStatus = 'active' | 'inactive' | 'pending';
+interface InsuranceCardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Plan name */
+    planName: string;
+    /** Member ID */
+    memberId: string;
+    /** Group number */
+    groupNumber: string;
+    /** Plan type */
+    planType: InsurancePlanType;
+    /** Coverage status */
+    status: InsuranceStatus;
+    /** Coverage effective date */
+    effectiveDate: string;
+    /** Coverage expiration date */
+    expirationDate?: string;
+}
+/**
+ * InsuranceCard — displays insurance plan summary information.
+ *
+ * Accessibility:
+ * - Uses role="region" with aria-label for screen reader context
+ * - Status communicated via text label, not color alone
+ * - Structured layout for easy scanning
+ */
+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;
+}
+/**
+ * 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;
+
+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;
+}
+/**
+ * ConfirmDialog — confirmation dialog built on native <dialog>.
+ *
+ * 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
+ */
+declare function ConfirmDialog({ open, onConfirm, onCancel, title, message, confirmLabel, cancelLabel, variant, loading, className, }: ConfirmDialogProps): 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;
+}
+/**
+ * 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;
+
+/** Merge CSS module class names, filtering out falsy values */
+declare function cn(...classes: (string | false | null | undefined)[]): string;
+
+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 };