@cwellt_software/cwellt-reactjs-lib 1.4.4 → 1.4.6

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default, { HTMLProps, PropsWithChildren, FC, ReactNode, CSSProperties, ReactElement, HTMLAttributes, DetailedHTMLProps, TextareaHTMLAttributes, InputHTMLAttributes, SelectHTMLAttributes, Component, ComponentType } from 'react';
 import * as CSS from 'csstype';
+import { DayPickerLocale } from 'react-day-picker/locale';
 import { Matcher } from 'react-day-picker';
 
 declare class CwSelectList {
@@ -30,6 +31,23 @@ interface CwSelectListProps {
     active?: boolean;
 }
 
+interface CwLayoutProps {
+    /** Main axis direction: 'row' = elements side by side | 'column' = elements stacked */
+    direction?: 'row' | 'column';
+    /** Alignment on the perpendicular axis: vertical when direction is 'row', horizontal when 'column' */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    /** Distribution along the main axis (same direction as direction prop) */
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around';
+    /** Space between internal elements */
+    gap?: 'none' | 'small' | 'medium' | 'large';
+}
+interface CwGroupLayoutProps {
+    /** Layout of the group container (how items are arranged relative to each other) */
+    groupLayout?: CwLayoutProps;
+    /** Layout of each individual item (how label relates to its control) */
+    itemLayout?: CwLayoutProps;
+}
+
 declare function CwHeadingMain(props: React__default.PropsWithChildren<React__default.HTMLProps<HTMLHeadingElement>>): react_jsx_runtime.JSX.Element;
 
 declare function CwHeadingSecond(props: React__default.PropsWithChildren<React__default.HTMLProps<HTMLHeadingElement>>): react_jsx_runtime.JSX.Element;
@@ -57,18 +75,11 @@ interface CwLabelProps extends Omit<HTMLProps<PropsWithChildren<HTMLLabelElement
  */
 declare function CwLabel(props: CwLabelProps): react_jsx_runtime.JSX.Element;
 
-interface CwTooltipProps {
-    children?: any;
-    tooltipTitle?: any;
-    tooltipTitleStyle?: React$1.CSSProperties;
-}
-declare function CwTooltip(CwelltTooltipProps: React$1.PropsWithChildren<CwTooltipProps>): react_jsx_runtime.JSX.Element;
-
 type ChipColorScheme = 'danger' | 'warning' | 'success' | 'info' | 'neutral' | 'custom';
 type ChipVariant = 'soft' | 'solid' | 'outline';
 interface CwChipProps {
     /*** Text content of the chip **/
-    label: string;
+    label?: string;
     /*** Predefined color scheme of the chip **/
     colorScheme?: ChipColorScheme;
     /*** Custom color (only used when colorScheme is 'custom') **/
@@ -114,6 +125,7 @@ interface CwMessageProps {
     messageType?: CwMessageType;
     duration?: number;
     onClose?: () => void;
+    onClick?: () => void;
 }
 declare const CwMessage: FC<CwMessageProps>;
 /**
@@ -153,7 +165,7 @@ declare class CwMessageManager {
     root: any;
     static getInstance(): CwMessageManager;
     private init;
-    showMessage(message: string, type?: CwMessageType, duration?: number): void;
+    showMessage(message: string, type?: CwMessageType, duration?: number, onClick?: () => void): void;
     private closeMessage;
 }
 /**
@@ -172,7 +184,7 @@ declare class CwMessageManager {
  *
  * @note For inline messages within components, use `CwNote` or `useCwMessage` hook instead
  */
-declare function CwDisplayMessage(message: string, type?: CwMessageType, duration?: number): void;
+declare function CwDisplayMessage(message: string, type?: CwMessageType, duration?: number, onClick?: () => void): void;
 
 interface CwNoteProps {
     /** Message content (used when no children provided) */
@@ -184,7 +196,7 @@ interface CwNoteProps {
     /** Custom color - if provided, overrides color prop */
     customColor?: string;
     /** Size of the message */
-    fontSize?: 'small' | 'regular' | 'large';
+    fontSize?: 'small' | 'regular' | 'medium' | 'large' | 'huge';
     /** Optional icon from your custom font (always rendered if provided) */
     icon?: string;
     /** Whether the note can be dismissed manually (default: false) */
@@ -197,6 +209,8 @@ interface CwNoteProps {
     style?: React__default.CSSProperties;
     /** Custom message content (overrides content but not icon) */
     children?: React__default.ReactNode;
+    /** Layout configuration: icon position relative to content */
+    layout?: CwLayoutProps;
 }
 /**
  * CwNote - Inline note component for instructions and contextual content
@@ -272,19 +286,13 @@ declare function CwImageZoom(image: ZoomImageItem): react_jsx_runtime.JSX.Elemen
 interface CwIconProps extends Omit<HTMLProps<HTMLSpanElement>, "className" | "size"> {
     /** Icon identifier */
     iconId: string;
-    /** Source of the icon: 'fontawesome' or 'cwellt'. Defaults to 'cwellt' */
-    source?: 'fontawesome' | 'cwellt';
     /** Color variant **/
     color?: 'primary' | 'danger' | 'success' | 'neutral';
     /** Size options **/
-    size?: 'small' | 'regular' | 'medium' | 'large';
+    size?: 'small' | 'regular' | 'medium' | 'large' | 'huge';
+    /** Tooltip position **/
+    tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
 }
-/**
- * Icon component that supports both FontAwesome 4 and cwellt icon font
- * @example
- * <CwIcon iconId="house" /> // Uses cwellt icon font
- * <CwIcon iconId="house" source="fontawesome" /> // Uses FontAwesome
- */
 declare function CwIcon(props: CwIconProps): react_jsx_runtime.JSX.Element;
 
 type LoadingSize = 'small' | 'regular' | 'large';
@@ -354,8 +362,70 @@ interface CwGenericTooltipProps {
     showDelay?: number;
     displayInline?: boolean;
 }
+/**
+ * Standalone tooltip component. Each instance manages its own portal,
+ * requiring no external dependencies or global setup.
+ *
+ * Suitable for low-density use cases with few tooltip instances.
+ * For high-density scenarios (e.g. schedulers, tables, lists),
+ * prefer CwTooltipNew which shares a single DOM portal for better performance.
+ *
+ * @remarks Not formally deprecated, but CwTooltipNew is now the recommended
+ * approach for new implementations. Cannot be deprecated yet due to potential use on projects such as Operon and Improve.
+ *
+ * @see CwTooltipNew
+ */
 declare const CwGenericTooltip: FC<CwGenericTooltipProps>;
 
+interface CwTooltipProps {
+    children: ReactNode;
+    content?: ReactNode;
+    dissapearsWhenHover?: boolean;
+    hide?: boolean;
+    position?: "top" | "bottom" | "left" | "right";
+    overlayStyle?: CSSProperties;
+    showDelay?: number;
+    displayInline?: boolean;
+    /** Explicit constraint element. Falls back to the nearest TooltipConstraintContext (e.g. provided by NewScheduler). */
+    constraintElement?: HTMLElement | null;
+}
+/**
+ * Tooltip component backed by the global CwTooltipManager singleton.
+ * More performant than CwGenericTooltip for high-density scenarios (e.g. schedulers)
+ * as it shares a single DOM portal across all instances.
+ *
+ * Self-initializes the Manager if not already mounted via ensureTooltipManager().
+ * Drop-in replacement for CwGenericTooltip with the same API.
+ *
+ * @see CwTooltipManager
+ * @see CwGenericTooltip
+ */
+declare const CwTooltipNew: FC<CwTooltipProps>;
+
+/**
+ * Global tooltip renderer. Manages a single portal instance in the DOM,
+ * shared across all CwTooltipNew instances for optimal performance.
+ *
+ * Mount once at the app root, or let CwTooltipNew handle it automatically
+ * via ensureTooltipManager().
+ *
+ * @see CwTooltipNew
+ * @see showTooltip
+ * @see hideTooltip
+ */
+declare const CwTooltipManager: React__default.FC;
+
+/**
+ * Provides a constraint element for tooltip positioning within a container.
+ * When set, CwTooltipNew will keep tooltips within the container's bounds
+ * instead of the full window — useful when a sidebar or panel reduces the
+ * visible area (e.g. the OpsTool right sidebar next to the scheduler).
+ *
+ * NewScheduler automatically provides its own container via this context.
+ */
+declare const TooltipConstraintContext: React$1.Context<HTMLElement | null>;
+declare const useTooltipConstraint: () => HTMLElement | null;
+
 interface CwModalProps {
     modalState?: boolean;
     classNameModalOverlay?: string;
@@ -431,7 +501,6 @@ interface State$2 {
     isModal: boolean;
 }
 declare class CwReportModal extends React$1.Component<CwReportModalProps, State$2> {
-    formRef: React$1.RefObject<FormInstance>;
     constructor(props: Readonly<CwReportModalProps>);
     render(): react_jsx_runtime.JSX.Element;
 }
@@ -480,6 +549,8 @@ interface CwDialogProps extends HTMLProps<PropsWithChildren<HTMLDialogElement>>
     hideFooter?: boolean;
     /*** Reposition the dialog when content size changes after opening. For modals with slow loading content. Default: false **/
     autoReposition?: boolean;
+    /** If true, the save button will be disabled */
+    disableSave?: boolean;
 }
 declare const CwDialog: FC<CwDialogProps>;
 
@@ -646,7 +717,7 @@ interface CwAccordionContainerProps {
  */
 declare function CwAccordionContainer(CwelltAccordionContainerProps: React$1.PropsWithChildren<CwAccordionContainerProps>): react_jsx_runtime.JSX.Element;
 
-interface Column<T = any> {
+interface Column$1<T = any> {
     title: string;
     dataIndex?: keyof T;
     key: string;
@@ -659,7 +730,7 @@ interface DataItem {
     [key: string]: any;
 }
 interface CwTableProps<T = any> {
-    columns: Column<T>[];
+    columns: Column$1<T>[];
     data: T[];
     pagination?: boolean;
     pageSizeOptions?: number[];
@@ -670,11 +741,14 @@ interface CwTableProps<T = any> {
     classNameRow?: string | ((record: T) => string);
     style?: React__default.CSSProperties;
     id?: string;
+    /** Sets `data-testid` on the outer wrapper. Use for stable Selenium / e2e selectors. */
+    testId?: string;
     textNoData?: string;
     rowKey?: keyof T;
     loading?: boolean;
     scrollHeight?: number | string;
     stickyHeader?: boolean;
+    pageLabel?: string;
     rowSelection?: {
         selectedRowKeys?: T[keyof T][];
         onChange?: (selectedKeys: T[keyof T][], selectedRows: T[]) => void;
@@ -750,7 +824,221 @@ interface CwTableProps<T = any> {
  *
  * @returns React component
  */
-declare function CwTable<T = any>({ columns, data, pagination, pageSizeOptions, expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, textNoData, rowKey, loading, scrollHeight, stickyHeader, rowSelection }: Readonly<CwTableProps<T>>): react_jsx_runtime.JSX.Element;
+declare function CwTable<T = any>({ columns, data, pagination, pageSizeOptions, expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, testId, textNoData, rowKey, loading, scrollHeight, stickyHeader, pageLabel, rowSelection }: Readonly<CwTableProps<T>>): react_jsx_runtime.JSX.Element;
+
+interface SortableColumn<T = any> {
+    /** Header label */
+    title: string;
+    /** Key of the data field to display (skipped when `render` is provided) */
+    dataIndex?: keyof T;
+    /** Unique column identifier */
+    key: string;
+    /** Custom cell renderer — receives the full row item */
+    render?: (item: T) => React__default.ReactNode;
+    /** Additional CSS class for <th> and <td> */
+    className?: string;
+    /** Fixed column width */
+    width?: number | string;
+}
+interface CwSortableTableProps<T = any> {
+    /** Column definitions */
+    columns: SortableColumn<T>[];
+    /** Data array — each item must have the field specified in `rowKey` */
+    data: T[];
+    /**
+     * Field used as unique row identifier.
+     * @default "key"
+     */
+    rowKey?: keyof T;
+    /**
+     * Async callback fired when the user clicks Save.
+     * Receives the full re-ordered array — persist it however you need.
+     *
+     * @example
+     * onReorder={async (newOrder) => {
+     *   await Promise.all(newOrder.map((item, i) => api.updateOrder(item.id, i)));
+     * }}
+     */
+    onReorder: (newData: T[]) => Promise<void>;
+    /** Show a loading skeleton instead of rows */
+    loading?: boolean;
+    /** Message shown when data is empty */
+    textNoData?: string;
+    /** CSS class for the outer container */
+    className?: string;
+    /** CSS class for the <table> element */
+    tableClassName?: string;
+    /** Constrain height and enable vertical scroll */
+    maxHeight?: number | string;
+    /**
+     * Whether to show the drag handle column.
+     * @default true
+     */
+    showHandle?: boolean;
+    /** Optional inline styles for the outer container */
+    style?: React__default.CSSProperties;
+    /** Label for the Save button. @default "Save order" */
+    saveLabel?: string;
+    /** Label for the Discard button. @default "Discard" */
+    discardLabel?: string;
+}
+/**
+ * CwSortableTable
+ *
+ * A table with drag-and-drop row reordering and save/discard support.
+ * Shares visual styles with CwTable but is intentionally simpler:
+ * no column sorting, no pagination.
+ *
+ * When the user reorders rows, changes are held locally until they
+ * click Save. A save bar appears automatically when there are pending changes.
+ *
+ * Follows the same pattern as CwSortableList:
+ * - All rows are draggable — the handle is visual only
+ * - Reorder is calculated in onDragEnd using lastValidDropIndex
+ * - draggedItem is tracked in state, not via dataTransfer
+ */
+declare function CwSortableTable<T = any>({ columns, data, rowKey, onReorder, loading, textNoData, className, tableClassName, maxHeight, showHandle, style, saveLabel, discardLabel, }: Readonly<CwSortableTableProps<T>>): react_jsx_runtime.JSX.Element;
+
+interface SortableTableDragState {
+    /** Index of the row currently being dragged (-1 if none) */
+    dragSourceIndex: number;
+    /** Index where the drop indicator should appear (-1 if none) */
+    dropTargetIndex: number;
+}
+interface UseSortableTableReturn<T> {
+    /** Current ordered items */
+    items: T[];
+    /** Current drag state (for rendering drop indicators) */
+    dragState: SortableTableDragState;
+    /** Whether there are unsaved reorder changes */
+    hasChanges: boolean;
+    /**
+     * Call this after each drag-and-drop with the already-reordered array.
+     * The hook just stores it — reorder logic lives in the component, same pattern as useSortableList.
+     */
+    handleReorder: (newItems: T[]) => void;
+    /** Save current order — receives an async callback to persist the data */
+    handleSave: (onSave: (items: T[]) => Promise<void>) => Promise<void>;
+    /** Discard changes and restore original order */
+    handleDiscard: () => void;
+}
+/**
+ * Hook that provides state management for CwSortableTable.
+ *
+ * Follows the same pattern as useSortableList:
+ * - The hook only manages STATE (items, hasChanges, save, discard)
+ * - The component manages INTERACTION (drag, drop, calculating new order)
+ * - handleReorder receives the already-reordered array and just stores it
+ * - Changes are only persisted when handleSave is called
+ * - handleDiscard restores the original order
+ *
+ * @param initialItems - The initial array of items to display
+ *
+ * @example
+ * ```tsx
+ * const { items, hasChanges, handleReorder, handleSave, handleDiscard } = useSortableTable(data);
+ * ```
+ */
+declare function useSortableTable<T>(initialItems: T[]): UseSortableTableReturn<T>;
+
+interface ServerSideTableState<T = any> {
+    page: number;
+    pageSize: number;
+    sortKey?: keyof T | null;
+    sortDirection?: "asc" | "desc" | null;
+}
+interface Column<T = any> {
+    title: string;
+    dataIndex?: keyof T;
+    key: string;
+    render?: (item: T) => React__default.ReactNode;
+    className?: string;
+    sortable?: boolean;
+    width?: number | string;
+}
+interface CwTableServerSideProps<T = any> {
+    columns: Column<T>[];
+    data: T[];
+    totalItems: number;
+    pagination?: boolean;
+    pageSizeOptions?: number[];
+    pageLabel?: string;
+    expandedRowRender?: (record: T) => React__default.ReactNode;
+    onExpand?: (record: T) => void;
+    classNameContainer?: string;
+    className?: string;
+    classNameRow?: string | ((record: T) => string);
+    style?: React__default.CSSProperties;
+    id?: string;
+    /** Sets `data-testid` on the outer wrapper. Use for stable Selenium / e2e selectors. */
+    testId?: string;
+    textNoData?: string;
+    rowKey?: keyof T;
+    loading?: boolean;
+    scrollHeight?: number | string;
+    stickyHeader?: boolean;
+    rowSelection?: {
+        selectedRowKeys?: T[keyof T][];
+        onChange?: (selectedKeys: T[keyof T][], selectedRows: T[]) => void;
+        type?: "single" | "multiple";
+    };
+    onChange?: (state: ServerSideTableState<T>) => void;
+    serverState?: ServerSideTableState<T>;
+}
+/**
+ * A reusable and customizable table component (server-side pagination and sorting).
+ *
+ * @param props - Component props to configure columns, data, styles, pagination, expanded rows, and more.
+ *
+ * @example
+ * // --- Component ---
+ * const columns: Column<User>[] = [
+ *   { title: "Name", dataIndex: "name", key: "name", sortable: true },
+ *   { title: "Age", dataIndex: "age", key: "age", sortable: true },
+ *   { title: "Address", dataIndex: "address", key: "address" }
+ * ];
+ *
+ *
+ * const [tableState, setTableState] = useState<ServerSideTableState<User>>({
+ *   page: 1,
+ *   pageSize: 5,
+ *   sortKey: null,
+ *   sortDirection: null
+ * });
+ * const [data, setData] = useState<User[]>([]);
+ * const [totalItems, setTotalItems] = useState(0);
+ * const [loading, setLoading] = useState(false);
+ *
+ * // Fetch simulation on table state change
+ * useEffect(() => {
+ *   setLoading(true);
+ *   fetch(`/api/users?page=${tableState.page}&pageSize=${tableState.pageSize}` +
+ *     (tableState.sortKey ? `&sortKey=${tableState.sortKey}&sortDirection=${tableState.sortDirection}` : "")
+ *   )
+ *     .then(res => res.json())
+ *     .then(({ items, total }) => {
+ *       setData(items);
+ *       setTotalItems(total);
+ *     })
+ *     .finally(() => setLoading(false));
+ * }, [tableState]);
+ *
+ * <CwTableServerSide<User>
+ *   columns={columns}
+ *   data={data}
+ *   totalItems={totalItems}
+ *   pagination={true}
+ *   pageSizeOptions={[5, 10, 20]}
+ *   loading={loading}
+ *   serverState={tableState}
+ *   onChange={setTableState}
+ *   rowKey="id"
+ *   textNoData="No data available"
+ * />
+ *
+ * @returns React component
+ */
+declare function CwTableServerSide<T = any>({ columns, data, totalItems, pagination, pageSizeOptions, pageLabel, expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, testId, textNoData, rowKey, loading, scrollHeight, stickyHeader, rowSelection, onChange, serverState, }: Readonly<CwTableServerSideProps<T>>): react_jsx_runtime.JSX.Element;
 
 interface Tab {
     key: string;
@@ -763,6 +1051,8 @@ interface Tab {
 }
 interface CwTabsProps {
     id?: string;
+    /** Sets `data-testid` on the outer wrapper. Use for stable Selenium / e2e selectors. */
+    testId?: string;
     onTabClick?: any;
     defaultActiveKey?: string;
     className?: string;
@@ -819,10 +1109,50 @@ interface CwExpandableProps extends Omit<HTMLProps<PropsWithChildren<HTMLDetails
  */
 declare const CwExpandable: FC<CwExpandableProps>;
 
+interface CwMasterDetailItem {
+    key: string;
+    content: ReactNode;
+    disabled?: boolean;
+}
+interface CwMasterDetailProps {
+    id?: string;
+    className?: string;
+    style?: React__default.CSSProperties;
+    /** Items displayed in the master list */
+    items: CwMasterDetailItem[];
+    /** Key of the currently selected item */
+    selectedKey?: string;
+    /** Called when an item is selected */
+    onSelect?: (key: string) => void;
+    /** Content rendered in the detail panel for the selected item */
+    detailContent?: ReactNode;
+    /** Placeholder shown when no item is selected */
+    emptyDetail?: ReactNode;
+    /** Search placeholder text */
+    searchPlaceholder?: string;
+    /** Called when the search value changes */
+    onSearch?: (value: string) => void;
+    /** Optional header content rendered above the list (below search) */
+    masterHeader?: ReactNode;
+    /** Optional footer content at the bottom of the master panel */
+    masterFooter?: ReactNode;
+    /** Initial width of the master panel in pixels */
+    masterWidth?: number;
+    /** Minimum width of the master panel in pixels */
+    minMasterWidth?: number;
+    /** Maximum width of the master panel in pixels */
+    maxMasterWidth?: number;
+    /** Whether the master panel is resizable */
+    resizable?: boolean;
+    /** Whether to show the search input */
+    showSearch?: boolean;
+}
+declare const CwMasterDetail: React__default.FC<CwMasterDetailProps>;
+
 /**
  * Props for the CwKeyValueList component
  */
-interface CwKeyValueListProps extends HTMLAttributes<HTMLDListElement> {
+interface CwKeyValueListProps extends HTMLAttributes<HTMLDListElement>, CwGroupLayoutProps {
     items: Array<{
         key: string;
         label: string;
@@ -832,7 +1162,9 @@ interface CwKeyValueListProps extends HTMLAttributes<HTMLDListElement> {
     }>;
     className?: string;
     emptyValue?: React__default.ReactNode;
-    /** Direction of flex layout: 'row' or 'column' @default "row" **/
+    /** Direction of flex layout for each item: 'row' or 'column' @default "row"
+     * @deprecated use itemLayout.direction instead
+     **/
     direction?: 'row' | 'column';
 }
 /**
@@ -905,8 +1237,9 @@ interface CwSortableListProps<T extends SortableItem$1> {
     movedItems?: Set<string | number>;
     emptyMessage?: ReactNode;
     readOnly?: boolean;
+    maxHeight?: number | string;
 }
-declare function CwSortableList<T extends SortableItem$1>({ items, onReorder, renderItem, className, movedItems, emptyMessage, readOnly, }: CwSortableListProps<T>): react_jsx_runtime.JSX.Element;
+declare function CwSortableList<T extends SortableItem$1>({ items, onReorder, renderItem, className, movedItems, emptyMessage, readOnly, maxHeight, }: CwSortableListProps<T>): react_jsx_runtime.JSX.Element;
 
 /**
  * useSortableList
@@ -985,6 +1318,8 @@ interface CwTableGroupedData {
 }
 interface CwTableGroupedProps {
     tableData: CwTableGroupedData;
+    /** Sets `data-testid` on the outer wrapper. Use for stable Selenium / e2e selectors. */
+    testId?: string;
 }
 /**
  * A table with expandable row groups.
@@ -1061,6 +1396,21 @@ interface CwFileUploadProps {
 }
 declare function CwFileUpload(fileUploadProps: React__default.PropsWithChildren<CwFileUploadProps>): react_jsx_runtime.JSX.Element;
 
+interface CwFileUploadMultipleLabels {
+    uploadDisabled: string;
+    clickToUpload: string;
+    acceptedFiles: (accept: string) => string;
+    singleFileOnly: string;
+    allTypesAccepted: string;
+    changeFile: string;
+    clearAll: string;
+    addMoreFiles: string;
+    filesSelected: (count: number) => string;
+    fileTooLarge: (name: string, maxSize: number) => string;
+    invalidFormat: (name: string, accepted: string) => string;
+    invalidMimeType: (name: string, types: string) => string;
+    alreadySelected: (name: string) => string;
+}
 interface CwFileUploadMultipleProps {
     name?: string;
     accept?: string;
@@ -1071,7 +1421,9 @@ interface CwFileUploadMultipleProps {
     onError?: (error: string) => void;
     className?: string;
     disabled?: boolean;
+    hideClearAll?: boolean;
     initialFileName?: string;
+    labels?: Partial<CwFileUploadMultipleLabels>;
 }
 declare function CwFileUploadMultiple(fileUploadProps: React__default.PropsWithChildren<CwFileUploadMultipleProps>): react_jsx_runtime.JSX.Element;
 
@@ -1170,16 +1522,50 @@ interface ColorPickerProps {
 }
 declare const CwColorPicker: React__default.FC<ColorPickerProps>;
 
+interface CwInputLayoutProps {
+    direction?: "row" | "column";
+    align?: "start" | "center" | "end";
+}
+/**
+ * Color input that displays a swatch trigger and opens a color picker dropdown via portal.
+ *
+ * @param value - Current color value (hex, rgb, etc.)
+ * @param onChange - Callback fired when the color changes
+ * @param previewText - Text shown inside the color picker preview
+ * @param disabled - Disables the trigger and prevents opening the picker
+ * @param readOnly - Makes the input read-only: focusable and visible, but cannot open the picker
+ * @param width - Width of the color swatch trigger (default: '4rem')
+ * @param height - Height of the color swatch trigger (default: '2rem')
+ * @param labelProps - Props for the optional label rendered above or beside the input (default: no label)
+ * @param layoutProps - Controls label/input layout direction and alignment (default: row direction with center alignment)
+ *
+ * @example
+ * // With label on the left
+ * <CwInputColor
+ *   value={color}
+ *   onChange={setColor}
+ *   labelProps={{ text: "Background", labelWidth: "10rem" }}
+ *   layoutProps={{ direction: "row", align: "center" }}
+ * />
+ */
 interface CwInputColorProps {
     value: string;
     onChange: (color: string) => void;
     previewText?: string;
     disabled?: boolean;
+    readOnly?: boolean;
     width?: string;
     height?: string;
+    labelProps?: CwLabelProps;
+    layoutProps?: CwInputLayoutProps;
 }
 declare const CwInputColor: React__default.FC<CwInputColorProps>;
 
+interface CwInputFeedback {
+    type: "danger" | "warning" | "success" | "info" | "neutral";
+    message: string;
+}
+
 interface CwInputTextProps extends Omit<HTMLProps<HTMLInputElement>, never> {
     /** Props to define alignment and size; undefined == column
      * @example alignProps={{direction:"row"}} */
@@ -1193,6 +1579,11 @@ interface CwInputTextProps extends Omit<HTMLProps<HTMLInputElement>, never> {
     /** Props of the icon; undefined == no icon
      * @example iconProps={{iconId:"phone"}} */
     iconProps?: CwIconProps;
+    /** Feedback messages shown below the input; accepts a single message or an array for multiple
+     * @example feedback={{ type: "danger", message: "This field is required" }}
+     * @example feedback={[{ type: "neutral", message: "Enter your full name" }, { type: "warning", message: "This name is already in use" }]}
+     */
+    feedback?: CwInputFeedback | CwInputFeedback[];
 }
 /**
  * Input for entering a string of text.
@@ -1210,6 +1601,7 @@ interface CwInputTextProps extends Omit<HTMLProps<HTMLInputElement>, never> {
  *   iconProps={{ id: "home" }}
  *   labelProps={{ children: "Name", width: "100px" }}
  *   buttonProps={{ children: "Ok", onclick:()=>{alert("hi")} }}
+ *   feedback={{ type: "danger", message: "This field is required" }}
  * />
  * ```
  */
@@ -1280,6 +1672,11 @@ interface CwTextAreaProps extends Omit<DetailedHTMLProps<TextareaHTMLAttributes<
     /** Props of the icon; undefined == no icon
      * @example iconProps={{iconId:"phone"}} */
     iconProps?: CwIconProps;
+    /** Feedback messages shown below the select; accepts a single message or an array for multiple
+    * @example feedback={{ type: "neutral", message: "Select the cat breed that best matches your preference" }}
+    * @example feedback={[{ type: "neutral", message: "Select a breed" }, { type: "danger", message: "This field is required" }]}
+    */
+    feedback?: CwInputFeedback | CwInputFeedback[];
 }
 declare function CwTextArea(props: CwTextAreaProps): react_jsx_runtime.JSX.Element;
 
@@ -1436,6 +1833,8 @@ declare function CwInputImage(props: CwInputImageProps): react_jsx_runtime.JSX.E
 interface CwImageAreaProps extends Omit<HTMLProps<HTMLImageElement>, "className" | "ref" | "onMouseDown" | "onMouseMove" | "onMouseUp" | "onDragStart"> {
     /** Not implemented */
     initialSelectionArea?: DOMRect;
+    /** Constrain the selection rectangle to a fixed width/height ratio (e.g. 16/9) */
+    aspectratio?: number;
     /** Hide the selection area right after selecting */
     selectionAreaAttenuation?: CSS.Property.Opacity;
     /** Called when the selection ends, return true to continue, false to abort */
@@ -1452,6 +1851,8 @@ interface CwImageAreaProps extends Omit<HTMLProps<HTMLImageElement>, "className"
 interface CwImageAreaMethods {
     /** Returns the current selected area as an image, or undefined if no selection has been made */
     getSelectedImage: () => string | undefined;
+    /** Programmatically clears the current selection */
+    clearSelection: () => void;
 }
 /**
  * An image with a selectable rectangle region, useful for cropping or selecting a section of the image
@@ -1534,6 +1935,22 @@ declare class Weekdays {
 }
 declare const CwWeekdaySelector: FC<CwWeekdaySelectorProps>;
 
+interface CwCheckProps extends Omit<React__default.DetailedHTMLProps<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type"> {
+    /** Props for the label component */
+    labelProps?: CwLabelProps;
+    /** Text content for the checkbox label */
+    labelText?: string;
+    /** Props for the icon component - iconId is required */
+    iconProps?: CwIconProps;
+    /** Layout alignment: "row" (side by side) | "column" (label above) @default "row" */
+    alignment?: "row" | "column";
+}
+declare function CwCheck(props: CwCheckProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * @deprecated Use {@link CwCheck} for single checkboxes or {@link CwCheckboxGroup} for multiple options.
+ * This component will be removed in a future version.
+ */
 interface CwCheckboxProps {
     id?: string;
     labelName?: string;
@@ -1550,8 +1967,40 @@ interface CwCheckboxProps {
 }
 declare function CwCheckbox(CwCheckboxProps: React__default.PropsWithChildren<CwCheckboxProps>): react_jsx_runtime.JSX.Element;
 
+interface CheckboxOption {
+    /** Value sent to onChange */
+    value: string;
+    /** Text displayed next to the checkbox */
+    label: string;
+    /** Disables this specific option */
+    disabled?: boolean;
+}
+interface CwCheckboxGroupProps {
+    /** List of options to display */
+    options: CheckboxOption[];
+    /** Currently selected values */
+    value?: string[];
+    /** Callback when selection changes - returns full array of selected values */
+    onChange: (selected: string[]) => void;
+    /** Props for the label component */
+    labelProps?: CwLabelProps;
+    /** Props for alignment */
+    alignProps?: CwAlignProps;
+    /** Marks the group as required */
+    required?: boolean;
+    /** Disables all options */
+    disabled?: boolean;
+    /** Layout alignment of each individual checkbox: "row" (default) | "column" */
+    optionsAlignment?: "row" | "column";
+    /** Additional CSS class for the container */
+    className?: string;
+    /** Error or info messages below the group */
+    feedback?: CwInputFeedback | CwInputFeedback[];
+}
+declare function CwCheckboxGroup({ options, value, onChange, labelProps, alignProps, required, disabled, optionsAlignment, className, feedback, }: CwCheckboxGroupProps): react_jsx_runtime.JSX.Element;
+
 interface CwToggleProps extends Omit<React__default.DetailedHTMLProps<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type"> {
-    /** Props for the label component @deprecated Use labelText instead */
+    /** Props for the label component */
     labelProps?: CwLabelProps;
     /** Text content for the toggle label */
     labelText?: string;
@@ -1562,7 +2011,7 @@ interface CwToggleProps extends Omit<React__default.DetailedHTMLProps<React__def
 }
 declare function CwToggle(props: CwToggleProps): react_jsx_runtime.JSX.Element;
 
-interface CwSelectProps extends Omit<DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "className"> {
+interface CwSelectProps extends DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> {
     /** Props to define alignment and size; undefined == column
      * @example alignProps={{_direction:"row"}} */
     alignProps?: CwAlignProps;
@@ -1578,6 +2027,11 @@ interface CwSelectProps extends Omit<DetailedHTMLProps<SelectHTMLAttributes<HTML
     /** Default item
      * @example placeholder="Select something" */
     placeholder?: string;
+    /** Feedback messages shown below the select; accepts a single message or an array for multiple
+    * @example feedback={{ type: "neutral", message: "Select the cat breed that best matches your preference" }}
+    * @example feedback={[{ type: "neutral", message: "Select a breed" }, { type: "danger", message: "This field is required" }]}
+    */
+    feedback?: CwInputFeedback | CwInputFeedback[];
 }
 /**
  * Input for selecting an option from a list
@@ -1605,8 +2059,61 @@ interface CwSelectProps extends Omit<DetailedHTMLProps<SelectHTMLAttributes<HTML
  */
 declare function CwSelect(props: CwSelectProps): react_jsx_runtime.JSX.Element;
 
+/** A single selectable option in a {@link CwDropdown}. */
+interface CwDropdownOption {
+    /** Unique option identifier passed to `onChange`. */
+    value: string | number;
+    /** Display text shown in the trigger and option list. */
+    label: string;
+    /** Optional background color (any valid CSS value). Shown as a small dot next to the label. */
+    color?: string;
+    /** When `true` the option is rendered but cannot be selected. */
+    disabled?: boolean;
+}
+/** Props for {@link CwDropdown}. */
+interface CwDropdownProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Array of options to display */
+    options: CwDropdownOption[];
+    /** Current selected value */
+    value?: string | number;
+    /** Callback when value changes */
+    onChange?: (value: string | number | undefined) => void;
+    /** Props for label component */
+    labelProps?: CwLabelProps;
+    /** Props for alignment */
+    alignProps?: CwAlignProps;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Show search input (optional) */
+    allowSearch?: boolean;
+    /** Is disabled */
+    disabled?: boolean;
+    /** Is required */
+    required?: boolean;
+    /** Feedback messages */
+    feedback?: CwInputFeedback | CwInputFeedback[];
+}
+/**
+ * Custom dropdown component with colour-coded options, optional search filter, and full
+ * keyboard navigation (↑ ↓ Enter Esc Tab).
+ *
+ * Use `CwDropdown` instead of the native `<select>` when options need colour indicators or
+ * when inline search filtering is required.
+ *
+ * @example
+ * <CwDropdown
+ *   options={[{ value: 'a', label: 'Option A', color: '#1976D2' }]}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   labelProps={{ text: 'My Label' }}
+ * />
+ */
+declare function CwDropdown({ options, value, onChange, labelProps, alignProps, placeholder, allowSearch, disabled, required, feedback, className, style, ...otherProps }: CwDropdownProps): react_jsx_runtime.JSX.Element;
+
 interface CwOptionProps extends Omit<HTMLProps<PropsWithChildren<HTMLOptionElement>>, "className"> {
     text?: string;
+    /** Background color for the option (hex or CSS color). Renders as a colored bar on the left of the option text. */
+    color?: string;
 }
 /**
  * Option to display in the CwSelect
@@ -1615,7 +2122,7 @@ interface CwOptionProps extends Omit<HTMLProps<PropsWithChildren<HTMLOptionEleme
  * @example
  * <CwSelect>
  *   <CwOption>A</CwOption>
- *   <CwOption>B</CwOption>
+ *   <CwOption color="#4a90d9">Blue option</CwOption>
  *   <CwOption>C</CwOption>
  * </CwSelect>
  */
@@ -1637,6 +2144,39 @@ interface CwDropdownFilterProps {
 }
 declare function CwDropdownFilter(props: React$1.PropsWithChildren<CwDropdownFilterProps>): react_jsx_runtime.JSX.Element;
 
+interface CwPopoverButtonProps extends Omit<CwButtonProps, "onClick" | "children"> {
+    /** Content rendered inside the floating panel */
+    children: React__default.ReactNode;
+    /** Panel width — CSS value (e.g. "auto", "16rem"). @default "auto" */
+    panelWidth?: string;
+    /** Horizontal alignment relative to the button. @default "bottom-start" */
+    placement?: "bottom-start" | "bottom-end";
+    /** Additional CSS class for the panel */
+    panelClassName?: string;
+}
+/**
+ * Button that toggles a floating panel with arbitrary children.
+ * Uses the native Popover API — panel renders in the browser's top layer,
+ * escaping all overflow/stacking contexts. Light dismiss (click outside)
+ * and Escape key are handled natively by the browser.
+ *
+ * Designed as a composable primitive:
+ * - Column picker: put `<CwCheckboxGroup>` inside
+ * - Options menu: put toggles / links inside
+ * - Future CwTable integration: use internally for column visibility
+ *
+ * @example
+ * <CwPopoverButton text="Columns" icon="table" variant="outline">
+ *     <CwCheckboxGroup options={opts} value={val} onChange={setVal} />
+ * </CwPopoverButton>
+ *
+ * @example
+ * <CwPopoverButton text="Options" icon="options" variant="outline" placement="bottom-end">
+ *     <CwToggle labelText="Show assigned" checked={v} onChange={setV} />
+ * </CwPopoverButton>
+ */
+declare function CwPopoverButton({ children, panelWidth, placement, panelClassName, ...buttonProps }: CwPopoverButtonProps): react_jsx_runtime.JSX.Element;
+
 interface CwMultiFilterTagProps {
     /** Make sure each ID is unique */
     ID: string;
@@ -1663,6 +2203,7 @@ interface CwMultiFilterTagProps {
     Selected?: boolean;
     OnSelect?: (props: Omit<CwMultiFilterTagProps, "OnClick">) => void;
     OnRemove?: (props: Omit<CwMultiFilterTagProps, "OnRemove">) => void;
+    tooltip?: string;
 }
 /** @inheritdoc */
 interface ICwMultiFilterTag extends Omit<CwMultiFilterTagProps, "Removable" | "Selectable" | "Selected" | "OnSelect" | "OnRemove"> {
@@ -1688,6 +2229,12 @@ interface CwMultiFilterProps {
     allTags: Set<ICwMultiFilterTag>;
     /** Selected tags/filters passed as props */
     selectedTags: Set<CwMultiFilterTagProps>;
+    /** Placeholder text for the search input */
+    placeholder?: string;
+    /** Label for the "All categories" button */
+    allCategoriesLabel?: string;
+    /** Additional CSS class for the container */
+    className?: string;
     style?: React__default.CSSProperties;
 }
 /**
@@ -1831,6 +2378,69 @@ interface CwMultiFilterProps {
  */
 declare const CwMultiFilter: FC<CwMultiFilterProps>;
 
+interface CwTagSelectorOption {
+    /** Unique value identifying this option */
+    value: string;
+    /** Display text */
+    label: string;
+    /** Background color for the chip tag (any valid CSS color) */
+    color?: string;
+    /** Tooltip text shown on hover */
+    tooltip?: string;
+}
+interface CwTagSelectorProps {
+    /** HTML id */
+    id?: string;
+    /** All available options */
+    options: CwTagSelectorOption[];
+    /** Currently selected values */
+    value: string[];
+    /** Called when selection changes */
+    onChange: (selectedValues: string[]) => void;
+    /** Label */
+    labelProps?: CwLabelProps;
+    /** Icon */
+    iconProps?: CwIconProps;
+    /** Layout */
+    alignProps?: CwAlignProps;
+    /** Placeholder when nothing is selected */
+    placeholder?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Show a "Select all" toggle at the top of the dropdown */
+    showSelectAll?: boolean;
+    /** Feedback messages */
+    feedback?: CwInputFeedback | CwInputFeedback[];
+    /** Additional CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: React__default.CSSProperties;
+}
+/**
+ * Multi-select input with chip tags and searchable dropdown.
+ * Works like a Kendo MultiSelect: selected items appear as removable chips
+ * inside the input area, and a filtered dropdown lets the user pick more.
+ *
+ * @example
+ * ```tsx
+ * const options = [
+ *   { value: "1", label: "Alpha" },
+ *   { value: "2", label: "Bravo" },
+ *   { value: "3", label: "Charlie" },
+ * ];
+ * const [selected, setSelected] = useState<string[]>([]);
+ *
+ * <CwTagSelector
+ *   labelProps={{ text: "Tags" }}
+ *   options={options}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   placeholder="Select items…"
+ * />
+ * ```
+ */
+declare function CwTagSelector({ id, options, value, onChange, labelProps, iconProps, alignProps, placeholder, disabled, showSelectAll, feedback, className, style, }: CwTagSelectorProps): react_jsx_runtime.JSX.Element;
+
 type CwTreeNode<T> = {
     id: string | number;
     label: string;
@@ -1845,19 +2455,41 @@ type TreeViewProps<T> = {
 };
 declare function CwTreeView<T>({ data, onSelect, allowParentSelection, selectedId: initialSelectedId }: TreeViewProps<T>): react_jsx_runtime.JSX.Element;
 
+/** Props for {@link CwSearchInput}. */
 interface CwSearchInputProps extends HTMLProps<HTMLDivElement> {
+    /** List of items to search through. Each item must be a `CwSelectList` instance. */
     selectList: Array<CwSelectList>;
+    /** Props forwarded to the internal `CwLabel`. */
     labelProps?: CwLabelProps;
+    /** Props forwarded to the optional leading icon. */
     iconProps?: CwIconProps;
+    /** Props forwarded to the `CwAlign` layout wrapper. */
     alignProps?: CwAlignProps;
+    /** Called with the `id` of the selected `CwSelectList` item. */
     handleChange?: (value: any) => void;
+    /** Input placeholder text. Defaults to `"Search…"`. */
     placeholder?: string;
     className?: string;
     style?: React__default.CSSProperties;
+    /** Disables the input when `true`. */
     disabled?: boolean;
+    /** Renders the input in error state when `true`. */
     error?: boolean;
+    /** Custom renderer for each suggestion item. Receives the matching `CwSelectList` entry. */
     renderOption?: (option: CwSelectList) => React__default.ReactNode;
 }
+/**
+ * Text input with a live-filtered suggestion dropdown backed by a local `CwSelectList` array.
+ * Use `CwFindAirport` or `CwFindCrewmember` for API-backed search inputs.
+ *
+ * @example
+ * <CwSearchInput
+ *   selectList={myItems}
+ *   handleChange={(id) => console.log('selected', id)}
+ *   labelProps={{ text: 'Employee' }}
+ *   placeholder="Search by name…"
+ * />
+ */
 declare function CwSearchInput(optionsProps: React__default.PropsWithChildren<CwSearchInputProps>): react_jsx_runtime.JSX.Element;
 
 type Placement = 'bottom' | 'top' | 'left' | 'right';
@@ -1976,7 +2608,7 @@ declare function CwBtnEdit({ cw_btnOnclick, cw_btn_disabled, onClick, disabled,
  */
 declare function CwBtnDelete({ cw_btnOnclick, cw_btn_disabled, onClick, disabled, ...rest }: cw_btnProps): react_jsx_runtime.JSX.Element;
 
-type DateMatcher$2 = Matcher;
+type DateMatcher$3 = Matcher;
 interface CwDatePickerProps {
     /** Current selected date */
     value?: Date;
@@ -1989,7 +2621,7 @@ interface CwDatePickerProps {
     /** Array of specific dates to disable */
     disabledDates?: Date[];
     /** Function to determine if a date should be disabled */
-    disabledMatcher?: DateMatcher$2;
+    disabledMatcher?: DateMatcher$3;
     /** Default month to display when calendar opens */
     defaultMonth?: Date;
     /** Props for label component */
@@ -2013,8 +2645,22 @@ interface CwDatePickerProps {
     /** Number of months to display (default: 1) */
     numberOfMonths?: number;
     showTodayButton?: boolean;
+    /**
+     * First year shown in the year dropdown.
+     * Defaults to `minDate`'s year, or 10 years before today when not set.
+     */
+    yearRangeStart?: number;
+    /** Last year shown in the year dropdown. Defaults to `maxDate`'s year, or 5 years after today when not set. */
+    yearRangeEnd?: number;
+    locale?: DayPickerLocale;
+    todayLabel?: string;
+    /** Feedback messages shown below the input; accepts a single message or an array for multiple
+     * @example feedback={{ type: "danger", message: "This field is required" }}
+     * @example feedback={[{ type: "neutral", message: "Select a departure date" }, { type: "warning", message: "Date is in the past" }]}
+     */
+    feedback?: CwInputFeedback | CwInputFeedback[];
 }
-declare function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabledMatcher, defaultMonth, labelProps, alignProps, placeholder, displayFormat, disabled, required, className, showClear, popupPosition, numberOfMonths, showTodayButton, }: Readonly<CwDatePickerProps>): react_jsx_runtime.JSX.Element;
+declare function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabledMatcher, defaultMonth, labelProps, alignProps, placeholder, displayFormat, disabled, required, className, showClear, popupPosition, numberOfMonths, showTodayButton, locale, todayLabel, yearRangeStart, yearRangeEnd, feedback, }: Readonly<CwDatePickerProps>): react_jsx_runtime.JSX.Element;
 
 interface DateRangePreset {
     key: string;
@@ -2025,7 +2671,7 @@ interface DateRangePreset {
     };
 }
 
-type DateMatcher$1 = Matcher;
+type DateMatcher$2 = Matcher;
 interface DateRangeValue {
     from: Date | undefined;
     to: Date | undefined;
@@ -2042,7 +2688,7 @@ interface CwDateRangePickerProps {
     /** Array of specific dates to disable */
     disabledDates?: Date[];
     /** Function to determine if a date should be disabled */
-    disabledMatcher?: DateMatcher$1;
+    disabledMatcher?: DateMatcher$2;
     /** Maximum number of days allowed in range (optional) */
     maxRangeDays?: number;
     /** Default month to display when calendar opens */
@@ -2098,7 +2744,7 @@ interface CwDateTimePickerProps {
     /** Array of specific dates to disable */
     disabledDates?: Date[];
     /** Function to determine if a date should be disabled */
-    disabledMatcher?: DateMatcher$2;
+    disabledMatcher?: DateMatcher$3;
     /** Interval in minutes for time selection (default: 15) */
     timeInterval?: 5 | 10 | 15 | 30 | 60;
     /** Minimum selectable time in format "HH:mm" */
@@ -2127,10 +2773,16 @@ interface CwDateTimePickerProps {
     numberOfMonths?: number;
     /** Show "Now" button to select current date and time */
     showNowButton?: boolean;
+    /** Label for the "Now" button */
+    nowLabel?: string;
+    /** Locale for date formatting and calendar strings (default: enGB) */
+    locale?: DayPickerLocale;
+    /** Numeric timezone offset in hours (e.g., 1, 5.5, -3) */
+    timezoneOffset?: number;
 }
-declare function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledDates, disabledMatcher, timeInterval, minTime, maxTime, labelProps, alignProps, datePlaceholder, timePlaceholder, disabled, required, className, showClear, popupPosition, numberOfMonths, showNowButton, }: Readonly<CwDateTimePickerProps>): react_jsx_runtime.JSX.Element;
+declare function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledDates, disabledMatcher, timeInterval, minTime, maxTime, labelProps, alignProps, datePlaceholder, timePlaceholder, disabled, required, className, showClear, popupPosition, numberOfMonths, showNowButton, nowLabel, locale, timezoneOffset, }: Readonly<CwDateTimePickerProps>): react_jsx_runtime.JSX.Element;
 
-type DateMatcher = Matcher;
+type DateMatcher$1 = Matcher;
 interface CwDateTimePickerCompactProps {
     /** Current selected datetime */
     value?: Date;
@@ -2143,7 +2795,7 @@ interface CwDateTimePickerCompactProps {
     /** Array of specific dates to disable */
     disabledDates?: Date[];
     /** Function to determine if a date should be disabled */
-    disabledMatcher?: DateMatcher;
+    disabledMatcher?: DateMatcher$1;
     /** Interval in minutes for time selection (default: 15) */
     timeInterval?: 5 | 10 | 15 | 30 | 60;
     /** Minimum selectable time in format "HH:mm" */
@@ -2169,8 +2821,21 @@ interface CwDateTimePickerCompactProps {
     /** Number of months to display (default: 1) */
     numberOfMonths?: number;
     showTodayButton?: boolean;
+    /** Label for the "Now" button */
+    nowLabel?: string;
+    /** Label for the time column header */
+    timeLabel?: string;
+    /** Locale for date formatting and calendar strings (default: enGB) */
+    locale?: DayPickerLocale;
+    /**
+     * First year shown in the year dropdown.
+     * Defaults to `minDateTime`'s year, or 10 years before today when not set.
+     */
+    yearRangeStart?: number;
+    /** Last year shown in the year dropdown. Defaults to `maxDateTime`'s year, or 5 years after today when not set. */
+    yearRangeEnd?: number;
 }
-declare function CwDateTimePickerCompact({ value, onChange, minDateTime, maxDateTime, disabledDates, disabledMatcher, timeInterval, minTime, maxTime, labelProps, alignProps, placeholder, disabled, required, className, showClear, popupPosition, numberOfMonths, showTodayButton, }: Readonly<CwDateTimePickerCompactProps>): react_jsx_runtime.JSX.Element;
+declare function CwDateTimePickerCompact({ value, onChange, minDateTime, maxDateTime, disabledDates, disabledMatcher, timeInterval, minTime, maxTime, labelProps, alignProps, placeholder, disabled, required, className, showClear, popupPosition, numberOfMonths, showTodayButton, nowLabel, timeLabel, locale, yearRangeStart, yearRangeEnd, }: Readonly<CwDateTimePickerCompactProps>): react_jsx_runtime.JSX.Element;
 
 interface CwTimePickerProps {
     /** Current selected time in format "HH:mm" (24h format) */
@@ -2208,6 +2873,49 @@ interface CwTimePickerProps {
 }
 declare function CwTimePicker({ value, onChange, interval, minTime, maxTime, labelProps, alignProps, placeholder, disabled, required, className, showClear, popupPosition, useNative, }: CwTimePickerProps): react_jsx_runtime.JSX.Element;
 
+type DateMatcher = Matcher;
+interface CwDatePickerTemporalProps {
+    /** Current selected date */
+    value?: Temporal.PlainDate;
+    /** Callback when date changes */
+    onChange: (date: Temporal.PlainDate | undefined) => void;
+    /** Minimum selectable date */
+    minDate?: Temporal.PlainDate;
+    /** Maximum selectable date */
+    maxDate?: Temporal.PlainDate;
+    /** Array of specific dates to disable */
+    disabledDates?: Temporal.PlainDate[];
+    /** Function to determine if a date should be disabled */
+    disabledMatcher?: DateMatcher;
+    /** Default month to display when calendar opens */
+    defaultMonth?: Temporal.PlainYearMonth;
+    /** Props for label component */
+    labelProps?: CwLabelProps;
+    /** Props for alignment */
+    alignProps?: CwAlignProps;
+    /** Placeholder text for input */
+    placeholder?: string;
+    /** Display format for the input (default: dd/MM/yyyy) */
+    displayFormat?: string;
+    /** Is the input disabled */
+    disabled?: boolean;
+    /** Is the input required */
+    required?: boolean;
+    /** Additional CSS class for container */
+    className?: string;
+    /** Show clear button */
+    showClear?: boolean;
+    /** Pop Up Position */
+    popupPosition?: "left-bottom" | "left-top" | "right-top" | "right-bottom";
+    /** Number of months to display (default: 1) */
+    numberOfMonths?: number;
+    showTodayButton?: boolean;
+    todayLabel?: string;
+    /** Feedback messages shown below the input */
+    feedback?: CwInputFeedback | CwInputFeedback[];
+}
+declare function CwDatePickerTemporal({ value, onChange, minDate, maxDate, disabledDates, disabledMatcher, defaultMonth, labelProps, alignProps, placeholder, displayFormat, disabled, required, className, showClear, popupPosition, numberOfMonths, showTodayButton, todayLabel, feedback, }: Readonly<CwDatePickerTemporalProps>): react_jsx_runtime.JSX.Element;
+
 declare class cblEvent {
     id: string;
     start: Date;
@@ -2447,6 +3155,8 @@ interface SchedulerEventDm {
     secondaryTimeMarkerColor?: string;
     eventType?: number;
     alpha?: number;
+    /** Extra inline styles applied to the event box. Merged last — overrides computed styles. */
+    style?: React.CSSProperties;
 }
 interface SchedulerEventState<T extends SchedulerEventDm> {
     value: T;
@@ -2457,6 +3167,7 @@ declare const SchedulerEvent: FC<SchedulerEventState<SchedulerEventDm>>;
 
 interface BackgroundEventDm extends SchedulerEventDm {
     isVisible: boolean;
+    contentAlign?: "center" | "flex-end";
 }
 
 interface RowHeaderDm {
@@ -2466,6 +3177,7 @@ interface RowHeaderDm {
     title3?: string;
     subtitle?: string;
     subtitle2?: string;
+    rowHeightRem?: number;
 }
 interface RowHeaderProps<T extends RowHeaderDm> {
     value: T;
@@ -2474,6 +3186,15 @@ interface RowHeaderProps<T extends RowHeaderDm> {
 }
 declare const DefaultRowHeader: FC<RowHeaderProps<RowHeaderDm>>;
 
+interface IndicatorRowDm {
+    id: string;
+    rowId: string;
+    start: Date;
+    end: Date;
+    color: string;
+    tooltip?: ReactNode;
+}
+
 interface SchedulerState {
     selectedDate: Date;
     isUtc: boolean;
@@ -2484,6 +3205,7 @@ interface SchedulerState {
 type LineState = {
     left: number;
     width: number;
+    isDayBoundary?: boolean;
 };
 
 type OrderCategory<T> = keyof T & string;
@@ -2494,6 +3216,7 @@ interface SchedulerProps<T extends RowHeaderDm, P extends SchedulerEventDm> {
     EventComp: React__default.ComponentType<SchedulerEventState<P>>;
     events: P[];
     backgroundEvents: BackgroundEventDm[];
+    indicatorRows?: IndicatorRowDm[];
     rows: T[];
     contextMenuItems: MenuOption[];
     orderCategories?: OrderCategory<T>[];
@@ -2503,12 +3226,14 @@ interface SchedulerProps<T extends RowHeaderDm, P extends SchedulerEventDm> {
     onEvent: OnEvent;
     groupRowColors?: boolean;
     rowHeaderWidth?: number;
+    rowHeightRem?: number;
 }
 declare const Scheduler: <T extends RowHeaderDm, P extends SchedulerEventDm>(props: SchedulerProps<T, P>) => react_jsx_runtime.JSX.Element;
 
 interface SchedulerRowProps<T extends RowHeaderDm, P extends SchedulerEventDm> {
     events: P[];
     backgroundEvents: BackgroundEventDm[];
+    indicatorRows: IndicatorRowDm[];
     rowHeader: RowHeaderProps<T>;
     contextMenuItems?: MenuOption[];
     EventComp: ComponentType<SchedulerEventState<P>>;
@@ -2525,6 +3250,8 @@ interface SchedulerRowProps<T extends RowHeaderDm, P extends SchedulerEventDm> {
 
 declare const eventIsVisible: (startDate: Date, endDate: Date, selectedDate: Date, visibleDays: number) => boolean;
 
+declare const filterVisibleEvents: <P extends SchedulerEventDm>(events: P[], selectedDate: Date, visibleDays: number) => P[];
+
 declare const getDefaultDivisions: (visibleDays: number, selectedDate: Date) => HeaderDivision[];
 
 declare const getEventSizes: (schedulerDate: Date, totalDays: number, startDate: Date, endDate: Date) => {
@@ -2543,7 +3270,6 @@ interface PinRowHeaderProps extends RowHeaderDm {
     isLoading: boolean;
     highlightColor?: string;
     tooltip?: ReactNode;
-    overlayTooltipStyle?: CSSProperties;
     indicators?: ReactNode;
 }
 declare const PinRowHeader: FC<RowHeaderProps<PinRowHeaderProps>>;
@@ -2555,10 +3281,12 @@ interface SuperSchedulerProps {
     rows: PinRowHeaderProps[];
     events: SchedulerEventDm[];
     backgroundEvents: BackgroundEventDm[];
+    indicatorRows?: IndicatorRowDm[];
     contextMenuItems: MenuOption[];
     pinnedOrderCategory?: OrderCategory<PinRowHeaderProps>[];
     unPinnedOrderCategory?: OrderCategory<PinRowHeaderProps>[];
     onEvent: OnEvent;
+    rowHeightRem?: number;
 }
 declare const SuperScheduler: FC<SuperSchedulerProps>;
 
@@ -2575,22 +3303,99 @@ declare class OnClearPinned implements UiEvent {
 }
 
 type DisplayMode = "default" | "icao-only" | "iata-only" | "full-text";
+/** Props for {@link CwFindAirport}. */
 interface CwFindAirportProps {
+    /** Called with the selected airport's `AptKey` when a result is chosen. */
     handleChange: (value: number) => void;
+    /** API search mode passed to the WinOps backend. Defaults to `"OnlyDatabase"`. */
     searchType?: string;
+    /** Input placeholder text. Defaults to `"Search airport…"`. */
     placeHolder?: string;
+    /** Marks the field as required (visual indicator only). */
     required?: boolean;
+    /** Base URL of the WinOps backend, e.g. `"https://localhost:44300"`. */
     cblConfig: string;
     className?: string;
+    /** Pre-select an airport by its `AptKey`. Triggers an initial fetch to resolve the display text. */
     value?: number;
     disabled?: boolean;
-    displayMode?: DisplayMode;
+    /**
+     * Controls what part of the airport name is shown in the input after selection.
+     * - `"default"` — short `ICAO(IATA)` code format
+     * - `"icao-only"` — only the 4-letter ICAO code
+     * - `"iata-only"` — only the 3-letter IATA code
+     * - `"full-text"` — full `DisplayAirportText` from the API
+     */
+    displayMode?: DisplayMode; /** Fixed CSS width for the input wrapper, e.g. `"400px"`. */
     width?: string;
+    /** Text shown in the input on first render before any API data is loaded. */
+    initialDisplayText?: string;
+    /** Props forwarded to the internal `CwLabel`. */
     labelProps?: CwLabelProps;
+    /** Props forwarded to the `CwAlign` layout wrapper. */
     alignProps?: CwAlignProps;
 }
+/**
+ * API-backed airport search input for WinOps.
+ *
+ * Fetches matching airports from the WinOps backend as the user types (debounced).
+ * Renders results in a shared `cw-choice-dropdown` styled panel with keyboard navigation.
+ * Supports pre-selecting an airport by `value` (AptKey) and customising the displayed text
+ * format via `displayMode`.
+ *
+ * Requires a running WinOps backend — set `cblConfig` to its base URL.
+ *
+ * @example
+ * <CwFindAirport
+ *   cblConfig="https://localhost:44300"
+ *   handleChange={(key) => setAirportKey(key)}
+ *   labelProps={{ text: 'Departure Airport' }}
+ *   displayMode="iata-only"
+ * />
+ */
 declare const CwFindAirport: React__default.FC<CwFindAirportProps>;
 
+/** Props for {@link CwFindCrewmember}. */
+interface CwFindCrewmemberProps {
+    /** Called with the selected crewmember's numeric ID when a result is chosen. */
+    handleChange: (value: number) => void;
+    /** Input placeholder text. Defaults to `"Search crew…"`. */
+    placeHolder?: string;
+    /** Marks the field as required (visual indicator only). */
+    required?: boolean;
+    /** Base URL of the WinOps backend, e.g. `"https://localhost:44300"`. */
+    cblConfig: string;
+    className?: string;
+    /** Pre-select a crewmember by their numeric ID. Triggers an initial fetch to resolve the display text. */
+    value?: number;
+    disabled?: boolean;
+    /** Fixed CSS width for the input wrapper, e.g. `"400px"`. */
+    width?: string;
+    /** Text shown in the input on first render before any API data is loaded. */
+    initialDisplayText?: string;
+    /** Props forwarded to the internal `CwLabel`. */
+    labelProps?: CwLabelProps;
+    /** Props forwarded to the `CwAlign` layout wrapper. */
+    alignProps?: CwAlignProps;
+}
+/**
+ * API-backed crewmember search input for WinOps.
+ *
+ * Fetches matching crewmembers from the WinOps backend as the user types (debounced).
+ * Renders results in a shared `cw-choice-dropdown` styled panel with keyboard navigation.
+ * Supports pre-selecting a crewmember by numeric `value` (ID).
+ *
+ * Requires a running WinOps backend — set `cblConfig` to its base URL.
+ *
+ * @example
+ * <CwFindCrewmember
+ *   cblConfig="https://localhost:44300"
+ *   handleChange={(id) => setCrewId(id)}
+ *   labelProps={{ text: 'Crew Member' }}
+ * />
+ */
+declare const CwFindCrewmember: React__default.FC<CwFindCrewmemberProps>;
+
 declare class OnClickEvent implements UiEvent {
     readonly id: string;
     constructor(id: string);
@@ -2668,5 +3473,5 @@ declare class OnClickContextMenu implements UiEvent {
     constructor(id: string, clickedMenu: string);
 }
 
-export { CblDragAndDrop$1 as CblDragAndDrop, CwAccordionContainer, CwAlign, CwAnchoredMenu, CwBtnDelete, CwBtnEdit, CwBtnSave, CwButton, CwCard, CwCardList, CwCheckbox, CwChip, CwColorPicker, CwConfirmationPopup, CwContextMenu, CwDatePicker, CwDateRangePicker, CwDateTimePicker, CwDateTimePickerCompact, CwDialog, CwDialogManager, CwDigit, CwDisplayMessage, CwDropdownFilter, CwExpandable, CwFileUpload, CwFileUploadMultiple, CwFindAirport, CwGenericTooltip, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwImageGallery, CwImageZoom, CwInput, CwInputColor, CwInputDate, CwInputDatePicker, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwLoadingSmall, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalHover, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwNote, CwOption, CwReportModal, CwScheduler, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSortableList, CwSuperScheduler, CwTable, CwTableGrouped, CwTabs, CwTextArea, CwTime, CwTimePicker, CwToggle, CwTooltip, CwTreeView, CwWeekdaySelector, DefaultRowHeader, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PinRowHeader, Resource, Scheduler, SchedulerEvent, SuperScheduler, UiEvent, Weekdays, cblEvent, eventIsVisible, getDefaultDivisions, getEventSizes, itemsToMultiFilterTags, useCwMessage, useSortableList };
-export type { BackgroundEventDm, CardChip, ChipColorScheme, ChipVariant, Column, ConfirmationPopupProps, CwAlignProps, CwCardListProps, CwCardProps, CwChipProps, CwDialogProps, CwExpandableProps, CwImageAreaMethods, CwImageAreaProps, CwInputDatePickerProps, CwInputDateProps, CwInputDateTextProps, CwInputDatetimeProps, CwInputImageProps, CwInputNumberProps, CwInputPhoneProps, CwInputTextProps, CwInputTimeProps, CwKeyValueListProps, CwLabelProps, CwMessageProps, CwModalHoverProps, CwMultiFilterProps, CwMultiFilterTagProps, CwNoteProps, CwReportModalFunctionalProps, CwSelectListProps, CwSortableListProps, CwTableGroupedData, CwTableGroupedData_Group, CwTableGroupedData_Row, CwTableGroupedProps, CwTextAreaProps, CwTreeNode, DataItem, DateRangeValue, ICwMultiFilterTag, ImageItem, MenuOption, OnEvent, PinRowHeaderProps, RowHeaderDm, RowHeaderProps, SchedulerEventDm, SchedulerEventState, SchedulerRowProps, SchedulerState, SuperSchedulerProps, Tab, Weekday, ZoomImageItem, cblEventCompProps, resourceCompProps2 };
+export { CblDragAndDrop$1 as CblDragAndDrop, CwAccordionContainer, CwAlign, CwAnchoredMenu, CwBtnDelete, CwBtnEdit, CwBtnSave, CwButton, CwCard, CwCardList, CwCheck, CwCheckbox, CwCheckboxGroup, CwChip, CwColorPicker, CwConfirmationPopup, CwContextMenu, CwDatePicker, CwDatePickerTemporal, CwDateRangePicker, CwDateTimePicker, CwDateTimePickerCompact, CwDialog, CwDialogManager, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownFilter, CwExpandable, CwFileUpload, CwFileUploadMultiple, CwFindAirport, CwFindCrewmember, CwGenericTooltip, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwImageGallery, CwImageZoom, CwInput, CwInputColor, CwInputDate, CwInputDatePicker, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwLoadingSmall, CwMasterDetail, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalHover, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwNote, CwOption, CwPopoverButton, CwReportModal, CwScheduler, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSortableList, CwSortableTable, CwSuperScheduler, CwTable, CwTableGrouped, CwTableServerSide, CwTabs, CwTagSelector, CwTextArea, CwTime, CwTimePicker, CwToggle, CwTooltipManager, CwTooltipNew, CwTreeView, CwWeekdaySelector, DefaultRowHeader, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PinRowHeader, Resource, Scheduler, SchedulerEvent, SuperScheduler, TooltipConstraintContext, UiEvent, Weekdays, cblEvent, eventIsVisible, filterVisibleEvents, getDefaultDivisions, getEventSizes, itemsToMultiFilterTags, useCwMessage, useSortableList, useSortableTable, useTooltipConstraint };
+export type { BackgroundEventDm, CardChip, ChipColorScheme, ChipVariant, Column$1 as Column, ConfirmationPopupProps, CwAlignProps, CwCardListProps, CwCardProps, CwChipProps, CwDialogProps, CwDropdownOption, CwDropdownProps, CwExpandableProps, CwGroupLayoutProps, CwImageAreaMethods, CwImageAreaProps, CwInputDatePickerProps, CwInputDateProps, CwInputDateTextProps, CwInputDatetimeProps, CwInputImageProps, CwInputNumberProps, CwInputPhoneProps, CwInputTextProps, CwInputTimeProps, CwKeyValueListProps, CwLabelProps, CwLayoutProps, CwMasterDetailItem, CwMasterDetailProps, CwMessageProps, CwModalHoverProps, CwMultiFilterProps, CwMultiFilterTagProps, CwNoteProps, CwPopoverButtonProps, CwReportModalFunctionalProps, CwSelectListProps, CwSortableListProps, CwSortableTableProps, CwTableGroupedData, CwTableGroupedData_Group, CwTableGroupedData_Row, CwTableGroupedProps, CwTagSelectorOption, CwTagSelectorProps, CwTextAreaProps, CwTreeNode, DataItem, DateRangeValue, ICwMultiFilterTag, ImageItem, IndicatorRowDm, MenuOption, OnEvent, PinRowHeaderProps, RowHeaderDm, RowHeaderProps, SchedulerEventDm, SchedulerEventState, SchedulerRowProps, SchedulerState, ServerSideTableState, SortableColumn, SortableTableDragState, SuperSchedulerProps, Tab, UseSortableTableReturn, Weekday, ZoomImageItem, cblEventCompProps, resourceCompProps2 };