@geomak/ui 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,1273 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+declare const COLORS: {
+    PALETTE: {
+        readonly 'true-blue': "#0466C8";
+        readonly 'usafa-blue': "#0353A4";
+        readonly 'dark-cornflower-blue': "#023E7D";
+        readonly 'oxford-blue-700': "#002855";
+        readonly 'oxford-blue-800': "#001845";
+        readonly 'oxford-blue-900': "#001233";
+        readonly independence: "#33415C";
+        readonly 'black-coral': "#5C677D";
+        readonly 'roman-silver': "#7D8597";
+        readonly manatee: "#979DAC";
+        readonly white: "#fff";
+        readonly ice: "#DBF1FD";
+        readonly 'ice-dark': "#d0e3ed";
+        readonly 'midnight-green-eagle-900': "#013E53";
+        readonly 'midnight-green-eagle-700': "#125F6C";
+        readonly 'midnight-green-eagle-500': "#125F6C";
+        readonly 'rich-black-fogra': "#000202";
+        readonly 'rich-black-fogra-opaque': "#0000005b";
+        readonly 'prussian-blue': "#00273A";
+        readonly 'indigo-dye': "#013C54";
+        readonly ming: "#0F6372";
+        readonly skobeloff: "#217479";
+        readonly 'dark-cyan': "#2A8784";
+        readonly 'celadon-green': "#297E74";
+        readonly turquise: "#2EB8B0";
+        readonly 'oxford-blue-700-opaque': "rgba(0, 40, 85, .3)";
+        readonly disabled: "#dee2e6";
+        readonly error: "tomato";
+        readonly warning: "orange";
+        readonly success: "lightgreen";
+        readonly info: "lightblue";
+        readonly transparent: "rgba(255, 255, 255, .0)";
+    };
+};
+
+declare const Icon: {
+    (): react_jsx_runtime.JSX.Element;
+    Moon: ({ color }: {
+        color?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Sun: ({ color }: {
+        color?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    CheckCircle: ({ color, size }: {
+        color?: string;
+        size?: number;
+    }) => react_jsx_runtime.JSX.Element;
+    Login: ({ color, size }: {
+        color?: string;
+        size?: number;
+    }) => react_jsx_runtime.JSX.Element;
+    Loading: ({ color, size }: {
+        color?: string;
+        size?: number;
+    }) => react_jsx_runtime.JSX.Element;
+    ToggleLoading: ({ color, loading, size }: {
+        color?: string;
+        loading?: boolean;
+        size?: number;
+    }) => react_jsx_runtime.JSX.Element;
+    Eye: ({ color, size }: {
+        color?: string;
+        size?: number;
+    }) => react_jsx_runtime.JSX.Element;
+    EyeSlash: ({ color, size }: {
+        color?: string;
+        size?: number;
+    }) => react_jsx_runtime.JSX.Element;
+    ArrowRight: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Minus: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Dashboard: ({ color, size }: {
+        color?: string;
+        size?: number;
+    }) => react_jsx_runtime.JSX.Element;
+    FleetIcon: ({ color, size }: {
+        color?: string;
+        size?: number;
+    }) => react_jsx_runtime.JSX.Element;
+    Performance: ({ color, size }: {
+        color?: string;
+        size?: number;
+    }) => react_jsx_runtime.JSX.Element;
+    Map: ({ color, size }: {
+        color?: string;
+        size?: number;
+    }) => react_jsx_runtime.JSX.Element;
+    CharterParty: ({ color, size }: {
+        color?: string;
+        size?: number;
+    }) => react_jsx_runtime.JSX.Element;
+    Compliance: ({ color, size }: {
+        color?: string;
+        size?: number;
+    }) => react_jsx_runtime.JSX.Element;
+    Applications: ({ color, size }: {
+        color?: string;
+        size?: number;
+    }) => react_jsx_runtime.JSX.Element;
+    PowerOff: ({ color, size }: {
+        color?: string;
+        size?: number;
+    }) => react_jsx_runtime.JSX.Element;
+    ChevronDown: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    ChevronRight: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    DoubleChevronRight: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Checked: ({ color, size }: {
+        color?: string;
+        size?: number;
+    }) => react_jsx_runtime.JSX.Element;
+    Search: ({ color, size }: {
+        color?: string;
+        size?: number;
+    }) => react_jsx_runtime.JSX.Element;
+    Calendar: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Clock: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    ChartBoard: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    BarChartBoard: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    BarChartSquare: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    ChartBar: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    PieChart: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Shield: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Calculator: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Contract: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Buoy: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Cog: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Table: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Data: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    XClose: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Grid: ({ color, size }: {
+        color?: string;
+        size?: number;
+    }) => react_jsx_runtime.JSX.Element;
+    Carousel: ({ color, size }: {
+        color?: string;
+        size?: number;
+    }) => react_jsx_runtime.JSX.Element;
+    PlusCircle: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Info: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Warning: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Error: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    ShowMore: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Tweak: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Download: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Expand: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Collapse: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    ShieldCheck: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    XCircle: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Play: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Document: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Edit: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Upload: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    File: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Delete: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Bookmarks: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Save: ({ color, size }: {
+        color?: string;
+        size?: number;
+    }) => react_jsx_runtime.JSX.Element;
+    Copy: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    CircleStack: ({ color, className }: {
+        color?: string;
+        className?: string;
+    }) => react_jsx_runtime.JSX.Element;
+};
+
+interface IconButtonProps {
+    icon?: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /** 'primary' | 'bordered' */
+    type?: string;
+    buttonType?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    size?: 'sm' | 'lg';
+    loading?: boolean;
+    loadingIcon?: React.ReactNode;
+    title?: string;
+    [key: string]: any;
+}
+/**
+ * Square icon-only button.
+ *
+ * @example
+ * <IconButton icon={<Icon.Search />} onClick={doSearch} />
+ * <IconButton type="bordered" icon={<Icon.Edit />} />
+ */
+declare function IconButton({ icon, onClick, type, buttonType, disabled, size, loading, loadingIcon, }: IconButtonProps): react_jsx_runtime.JSX.Element;
+
+interface ModalProps {
+    /** Pixel dimensions [width, height] */
+    size?: [number, number];
+    isOpen?: boolean;
+    onClose?: () => void;
+    onOk?: () => void;
+    onCancel?: () => void;
+    okText?: string;
+    cancelText?: string;
+    hasFooter?: boolean;
+    title?: React$1.ReactNode;
+    children?: React$1.ReactNode;
+}
+/**
+ * Centred modal dialog powered by Radix Dialog.
+ *
+ * The Radix primitive handles focus-trap, escape-to-close, and ARIA roles.
+ * The VesOPS visual style (scale-in animation, prussian-blue header) is preserved.
+ *
+ * @example
+ * <Modal isOpen={open} onClose={() => setOpen(false)} title="Confirm" onOk={handleOk}>
+ *   Are you sure?
+ * </Modal>
+ */
+declare function Modal({ size, isOpen, onClose, onOk, onCancel, okText, cancelText, hasFooter, title, children, }: ModalProps): react_jsx_runtime.JSX.Element;
+
+interface DrawerProps {
+    isOpen?: boolean;
+    onClose?: () => void;
+    hasFooter?: boolean;
+    /** 'left' | 'right' */
+    placement?: 'left' | 'right';
+    width?: number;
+    okText?: string;
+    cancelText?: string;
+    onOk?: () => void;
+    onCancel?: () => void;
+    title?: React$1.ReactNode;
+    children?: React$1.ReactNode;
+}
+/**
+ * Side-sliding drawer panel powered by Radix Dialog.
+ *
+ * Radix handles focus-trap, escape-to-close, and ARIA roles.
+ * The drawer slides in from the left or right depending on `placement`.
+ *
+ * @example
+ * <Drawer isOpen={open} placement="right" onClose={() => setOpen(false)} title="Filters">
+ *   <FilterForm />
+ * </Drawer>
+ */
+declare function Drawer({ isOpen, onClose, hasFooter, placement, width, okText, cancelText, onOk, onCancel, title, children, }: DrawerProps): react_jsx_runtime.JSX.Element;
+
+interface TooltipProps {
+    children: React$1.ReactNode;
+    title: React$1.ReactNode;
+    /** 'top' | 'right' | 'bottom' | 'left' */
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    /** Delay in ms before showing the tooltip */
+    delayDuration?: number;
+}
+/**
+ * Tooltip powered by Radix Tooltip.
+ *
+ * Radix handles keyboard navigation (escape), pointer events, and ARIA.
+ * The VesOPS prussian-blue style is preserved.
+ *
+ * Wrap your app in `<TooltipProvider>` (re-exported below) to batch providers.
+ *
+ * @example
+ * <Tooltip title="Delete record" placement="right">
+ *   <IconButton icon={<Icon.Trash />} />
+ * </Tooltip>
+ */
+declare function Tooltip({ children, title, placement, delayDuration, }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+declare const TooltipProvider: React$1.FC<TooltipPrimitive.TooltipProviderProps>;
+
+interface TabItem {
+    key: string;
+    title: React$1.ReactNode;
+    content: React$1.ReactNode;
+}
+interface TabsProps {
+    tabs?: TabItem[];
+    onTabChange?: (prev: TabItem | undefined, next: TabItem | undefined) => void;
+    onTabClose?: (key: string) => void;
+    /** Only mount the active tab's content */
+    isLazy?: boolean;
+    tabsClosable?: boolean;
+    defaultActiveTab?: string;
+}
+/**
+ * Scrollable pill-style tabs powered by Radix Tabs.
+ *
+ * Radix handles roving-tabindex keyboard navigation and ARIA roles.
+ * The VesOPS pill visual style (rounded-3xl, ice/black-coral palette) is preserved.
+ * Supports dynamic tab add/remove with automatic activation.
+ *
+ * @example
+ * <Tabs
+ *   tabs={[
+ *     { key: 'v1', title: 'Vessel 1', content: <Panel1 /> },
+ *     { key: 'v2', title: 'Vessel 2', content: <Panel2 /> },
+ *   ]}
+ *   tabsClosable
+ *   onTabClose={(key) => removetab(key)}
+ * />
+ */
+declare function Tabs({ tabs, onTabChange, onTabClose, isLazy, tabsClosable, defaultActiveTab, }: TabsProps): react_jsx_runtime.JSX.Element;
+
+interface TreeNode {
+    key: string;
+    value: string;
+    nodeData?: any;
+    parentLabel?: string;
+    children?: TreeNode[];
+}
+interface TreeItemClickPayload {
+    isParent: boolean;
+    key: string;
+    label: string;
+    data?: any;
+    parentLabel?: string;
+}
+interface TreeProps {
+    structure: TreeNode[];
+    onItemClick: (payload: TreeItemClickPayload) => void;
+    defaultExpandAll?: boolean;
+    defaultExpandedKeys?: string[];
+}
+/** ─────────────────── public component ─────────────────── */
+/**
+ * Hierarchical tree view powered by Radix Accordion (nested).
+ *
+ * Each parent node is an independent Accordion.Root with `type="multiple"` so
+ * sibling branches are independent. Leaf nodes are plain clickable rows.
+ *
+ * @example
+ * <Tree
+ *   structure={fleetTree}
+ *   onItemClick={({ key, isParent }) => selectNode(key)}
+ *   defaultExpandAll
+ * />
+ */
+declare function Tree({ structure, onItemClick, defaultExpandAll, defaultExpandedKeys, }: TreeProps): react_jsx_runtime.JSX.Element;
+
+interface ToggleItem {
+    key: string;
+    label?: React$1.ReactNode;
+    icon?: React$1.ReactNode;
+}
+interface ToggleButtonProps {
+    items: ToggleItem[];
+    onChange: (key: string) => void;
+    activeKey: string;
+}
+/**
+ * Segmented toggle-button group powered by Radix ToggleGroup.
+ *
+ * Radix handles keyboard navigation (arrow keys), focus ring, and
+ * `role="group"` / `aria-pressed` ARIA attributes.
+ *
+ * @example
+ * <ToggleButton
+ *   items={[
+ *     { key: 'grid', icon: <Icon.Grid /> },
+ *     { key: 'list', icon: <Icon.List /> },
+ *   ]}
+ *   activeKey={view}
+ *   onChange={setView}
+ * />
+ */
+declare function ToggleButton({ items, onChange, activeKey }: ToggleButtonProps): react_jsx_runtime.JSX.Element;
+
+/** ─────────────────── types ─────────────────── */
+type NotificationType = 'info' | 'success' | 'warning' | 'danger';
+interface NotificationPayload {
+    title: React$1.ReactNode;
+    description?: React$1.ReactNode;
+    /** Auto-dismiss duration in ms (default 4000) */
+    duration?: number;
+    type?: NotificationType;
+}
+/** ─────────────────── provider ─────────────────── */
+/**
+ * Wrap your application (or a subtree) in `NotificationProvider` to enable
+ * toast notifications. Then call `useNotification()` anywhere inside to
+ * trigger them.
+ *
+ * @example
+ * // _app.tsx / main.tsx
+ * <NotificationProvider>
+ *   <App />
+ * </NotificationProvider>
+ *
+ * // Inside a component
+ * const notify = useNotification()
+ * notify.success({ title: 'Saved!', description: 'Your changes were saved.', duration: 3000 })
+ */
+declare function NotificationProvider({ children }: {
+    children: React$1.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+/** ─────────────────── hook ─────────────────── */
+/**
+ * Imperative notification API.
+ *
+ * @example
+ * const notify = useNotification()
+ * notify.success({ title: 'Done', description: 'Record saved.', duration: 3000 })
+ * notify.danger({ title: 'Error', description: err.message })
+ */
+declare function useNotification(): {
+    info: (props: Omit<NotificationPayload, "type">) => void;
+    success: (props: Omit<NotificationPayload, "type">) => void;
+    warning: (props: Omit<NotificationPayload, "type">) => void;
+    danger: (props: Omit<NotificationPayload, "type">) => void;
+};
+
+interface LoadingSpinnerProps {
+    /** Text animated letter by letter */
+    prompt: string;
+}
+/**
+ * Full-screen loading overlay with a spinning shape and staggered text reveal.
+ *
+ * @example
+ * {isLoading && <LoadingSpinner prompt="Loading data..." />}
+ */
+declare function LoadingSpinner({ prompt }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
+
+interface FadingBaseProps {
+    className?: string;
+    /** Controls mount/unmount with fade transition */
+    isMounted?: boolean;
+    children?: React$1.ReactNode;
+}
+/**
+ * Fade-in / fade-out page container.
+ *
+ * Replaces `react-transition-group` with a pure CSS opacity transition.
+ * The component mounts on `isMounted=true` and unmounts after the 300ms
+ * fade-out completes on `isMounted=false`.
+ *
+ * Uses CSS `dark:` class for the glass effect — no ThemeContext dependency.
+ *
+ * @example
+ * <FadingBase isMounted={isPageVisible}>
+ *   <PageContent />
+ * </FadingBase>
+ */
+declare function FadingBase({ className, isMounted, children, }: FadingBaseProps): react_jsx_runtime.JSX.Element;
+
+interface ListItem {
+    key: string | number;
+    label: React$1.ReactNode;
+    [key: string]: any;
+}
+interface ListProps {
+    items: ListItem[];
+    onItemClick: (item: ListItem) => void;
+    activeKey?: string | number;
+}
+/**
+ * Vertical clickable list with active-item highlight.
+ *
+ * @example
+ * <List
+ *   items={vessels.map(v => ({ key: v.imo, label: v.name }))}
+ *   activeKey={selectedImo}
+ *   onItemClick={(item) => setSelected(item.key)}
+ * />
+ */
+declare function List({ items, onItemClick, activeKey }: ListProps): react_jsx_runtime.JSX.Element;
+
+interface ScalableContainerProps {
+    width?: React$1.CSSProperties['width'];
+    height?: React$1.CSSProperties['height'];
+    children?: React$1.ReactNode;
+    /** CSS class applied to the children wrapper when expanded */
+    assignClassOnClick?: string;
+}
+/**
+ * Container that can be expanded to fill its parent, with a tooltip-annotated
+ * expand/collapse icon button.
+ *
+ * @example
+ * <ScalableContainer width="50%" height={300}>
+ *   <Chart data={data} />
+ * </ScalableContainer>
+ */
+declare function ScalableContainer({ width, height, children, assignClassOnClick, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
+
+interface GridCardItem {
+    key: string | number;
+    title: React$1.ReactNode;
+    description?: React$1.ReactNode;
+    /** Image URL or JSX element */
+    cover?: string | React$1.ReactNode;
+    enabled?: boolean;
+    /** Arbitrary route or payload — passed back to onOpen */
+    to?: string;
+    [key: string]: any;
+}
+interface GridCardProps {
+    item: GridCardItem;
+    buttonText?: string;
+    /** Called when the button is clicked. Receives the full item. */
+    onOpen?: (item: GridCardItem) => void;
+}
+/**
+ * Application card tile (grid layout).
+ *
+ * Decoupled from React Router — navigation is delegated to the `onOpen` prop.
+ *
+ * @example
+ * <GridCard
+ *   item={{ key: 'reports', title: 'Reports', enabled: true, to: '/reports' }}
+ *   onOpen={({ to }) => navigate(to!)}
+ * />
+ */
+declare function GridCard({ item, buttonText, onOpen }: GridCardProps): react_jsx_runtime.JSX.Element;
+
+interface OpaqueGridCardProps {
+    item: GridCardItem;
+    isRight?: boolean;
+    buttonText?: string;
+    onOpen?: (item: GridCardItem) => void;
+}
+/**
+ * Opaque carousel variant of GridCard (left or right edge of the carousel).
+ *
+ * Decoupled from React Router and ThemeContext.
+ * Uses CSS `dark:` classes instead of `useTheme()`.
+ *
+ * @example
+ * <OpaqueGridCard item={sideItem} isRight onOpen={({ to }) => navigate(to!)} />
+ */
+declare function OpaqueGridCard({ item, isRight, buttonText, onOpen, }: OpaqueGridCardProps): react_jsx_runtime.JSX.Element;
+
+interface CatalogGridProps {
+    items: GridCardItem[];
+    buttonText?: string;
+    onOpen?: (item: GridCardItem) => void;
+}
+/**
+ * Wrapping flex grid of `GridCard` tiles.
+ */
+declare function CatalogGrid({ items, buttonText, onOpen }: CatalogGridProps): react_jsx_runtime.JSX.Element;
+
+interface CatalogCarouselProps {
+    items: GridCardItem[];
+    buttonText?: string;
+    onOpen?: (item: GridCardItem) => void;
+}
+/**
+ * Three-card carousel (previous → active (scaled) → next).
+ *
+ * Decoupled from ThemeContext — uses CSS `dark:` classes.
+ */
+declare function CatalogCarousel({ items, buttonText, onOpen }: CatalogCarouselProps): react_jsx_runtime.JSX.Element;
+
+interface CatalogProps {
+    /** 'grid' | 'carousel' */
+    display?: 'grid' | 'carousel';
+    items?: GridCardItem[];
+    buttonText?: string;
+    onOpen?: (item: GridCardItem) => void;
+}
+/**
+ * Switches between grid and carousel layouts for a list of application tiles.
+ *
+ * @example
+ * <Catalog display="carousel" items={apps} onOpen={({ to }) => navigate(to!)} />
+ */
+declare function Catalog({ display, items, buttonText, onOpen }: CatalogProps): react_jsx_runtime.JSX.Element;
+
+interface MenuBarItemProps {
+    icon: React$1.ReactNode;
+    isActive: boolean;
+    title: string;
+    /** Called when the item is clicked (navigation or logout etc.) */
+    onClick?: () => void;
+}
+/**
+ * Single item in the MenuBar sidebar.
+ *
+ * Decoupled from React Router and context — navigation is delegated to `onClick`.
+ * The Tooltip is powered by Radix (same as the standalone Tooltip component).
+ *
+ * @example
+ * <MenuBarItem
+ *   icon={<Icon.Dashboard />}
+ *   title="Dashboard"
+ *   isActive={pathname === '/dashboard'}
+ *   onClick={() => navigate('/dashboard')}
+ * />
+ */
+declare function MenuBarItem({ icon, isActive, title, onClick }: MenuBarItemProps): react_jsx_runtime.JSX.Element;
+
+interface MenuBarItemConfig extends MenuBarItemProps {
+    key: string;
+}
+interface MenuBarProps {
+    items: MenuBarItemConfig[];
+}
+/**
+ * Vertical icon sidebar (left edge of the app).
+ *
+ * Decoupled from React Router, useAuth, and useData.
+ * The app composes the items array (with `onClick` handlers) and passes it in.
+ *
+ * @example
+ * const items: MenuBarItemConfig[] = [
+ *   { key: 'dash', icon: <Icon.Dashboard />, title: 'Dashboard', isActive: pathname === '/dashboard', onClick: () => navigate('/dashboard') },
+ *   { key: 'logout', icon: <Icon.PowerOff />, title: 'Sign Out', isActive: false, onClick: logOut },
+ * ]
+ * <MenuBar items={items} />
+ */
+declare function MenuBar({ items }: MenuBarProps): react_jsx_runtime.JSX.Element;
+
+interface ContextMenuActionItem {
+    key: string | number;
+    value: React$1.ReactNode;
+    icon?: React$1.ReactNode;
+    onClick?: (path?: string, reportType?: string) => void;
+    path?: string;
+    reportType?: string;
+    children?: ContextMenuActionItem[];
+}
+interface ContextMenuPosition {
+    x: number;
+    y: number;
+}
+interface ContextMenuProps {
+    items: ContextMenuActionItem[];
+    position: ContextMenuPosition;
+    visible: boolean;
+    onClose: () => void;
+}
+/**
+ * Right-click context menu positioned at arbitrary screen coordinates.
+ *
+ * Decoupled from `useData()` — the app manages `visible`, `position`, and
+ * `items` in its own state and passes them here.
+ *
+ * @example
+ * const [ctx, setCtx] = useState({ visible: false, items: [], position: { x: 0, y: 0 } })
+ *
+ * <div onContextMenu={(e) => {
+ *   e.preventDefault()
+ *   setCtx({ visible: true, items: menuItems, position: { x: e.clientX, y: e.clientY } })
+ * }}>...</div>
+ *
+ * <ContextMenu {...ctx} onClose={() => setCtx(c => ({ ...c, visible: false }))} />
+ */
+declare function ContextMenu({ items, position, visible, onClose }: ContextMenuProps): react_jsx_runtime.JSX.Element;
+
+interface WizardStep {
+    /** Ref to the DOM element to highlight */
+    stepRef: React$1.RefObject<HTMLElement>;
+    description: React$1.ReactNode;
+    /** 'natural' | 'center' — controls tooltip position relative to target */
+    positioning?: 'natural' | 'center';
+}
+interface WizardProps {
+    children: React$1.ReactNode;
+    steps: WizardStep[];
+    /** localStorage key used to remember dismissal (default: 'oxygen_wizard') */
+    storageKey?: string;
+}
+/**
+ * Guided-tour overlay wizard.
+ *
+ * Highlights a DOM element via a border, then shows a floating tooltip
+ * adjacent to it. Remembers dismissal via localStorage.
+ *
+ * @example
+ * const step1Ref = useRef<HTMLDivElement>(null)
+ * const steps = [
+ *   { stepRef: step1Ref, description: 'Click here to start.', positioning: 'natural' },
+ * ]
+ * <Wizard steps={steps}>
+ *   <div ref={step1Ref}>...</div>
+ * </Wizard>
+ */
+declare function Wizard({ children, steps, storageKey }: WizardProps): react_jsx_runtime.JSX.Element;
+
+/** ─────────────────── types ─────────────────── */
+interface TableColumn {
+    key: string | number;
+    label: React$1.ReactNode;
+    keyBind: string;
+    component?: (cellValue: any, row: any) => React$1.ReactNode;
+}
+interface PaginationOptions {
+    enabled?: boolean;
+    perPage?: number;
+    withPicker?: boolean;
+    serverSide?: boolean;
+    /** Server-side: current 1-based page number */
+    page?: number;
+    /** Server-side: total page count */
+    maxPage?: number;
+    /** Server-side: total row count (used to calculate maxPage) */
+    totalCount?: number;
+    pickerOptions?: Array<{
+        key: number;
+        value: number;
+        label: number;
+    }>;
+    onPageChange?: (page: number) => void;
+    onPerPageChange?: (perPage: number) => void;
+}
+interface ExpandRowOptions {
+    enabled?: boolean;
+    expandIcon?: React$1.ReactNode;
+    expandComponent?: (row: any) => React$1.ReactNode;
+}
+interface TableProps {
+    columns?: TableColumn[];
+    rows?: any[];
+    pagination?: PaginationOptions;
+    expandRow?: ExpandRowOptions;
+    hasSearch?: boolean;
+    footer?: React$1.ReactNode;
+    header?: React$1.ReactNode;
+    tableRef?: React$1.Ref<any>;
+    [key: string]: any;
+}
+/** ─────────────────── main component ─────────────────── */
+/**
+ * Data table with optional search, pagination, and expandable rows.
+ *
+ * Supports both client-side and server-side pagination.
+ *
+ * @example
+ * <Table
+ *   columns={[{ key: 'name', label: 'Name', keyBind: 'name' }]}
+ *   rows={data}
+ *   pagination={{ enabled: true, perPage: 15 }}
+ * />
+ */
+declare function Table({ columns, rows, pagination, expandRow, hasSearch, footer, header, }: TableProps): react_jsx_runtime.JSX.Element;
+
+interface ThemeSwitchProps {
+    checked: boolean;
+    onChange: (e: {
+        target: {
+            checked: boolean;
+        };
+    }) => void;
+}
+/**
+ * Theme (dark-mode) toggle switch powered by Radix Switch.
+ *
+ * Displays a red/green dot to indicate the checked state.
+ * Used as the dark-mode toggle in the TopBar.
+ *
+ * @example
+ * <Switch checked={isDarkMode} onChange={({ target }) => setDarkMode(target.checked)} />
+ */
+declare function Switch$1({ checked, onChange }: ThemeSwitchProps): react_jsx_runtime.JSX.Element;
+
+interface ButtonProps {
+    content?: React$1.ReactNode;
+    /** HTML button type attribute */
+    buttonType?: 'button' | 'submit' | 'reset';
+    /** Visual variant */
+    type?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    style?: React$1.CSSProperties;
+    icon?: React$1.ReactNode;
+    onClick?: React$1.MouseEventHandler<HTMLButtonElement>;
+}
+/**
+ * Primary action button.
+ *
+ * @example
+ * <Button content="Save" onClick={handleSave} />
+ * <Button content="Submit" buttonType="submit" loading={isPending} />
+ */
+declare function Button({ content, buttonType, loading, disabled, style, icon, onClick, }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+interface TextInputProps {
+    value?: any;
+    onChange?: React$1.ChangeEventHandler<HTMLInputElement>;
+    disabled?: boolean;
+    label?: React$1.ReactNode;
+    htmlFor?: string;
+    placeholder?: string;
+    name?: string;
+    inputStyle?: React$1.CSSProperties;
+    style?: React$1.CSSProperties;
+    /** 'horizontal' | 'vertical' */
+    layout?: string;
+    onBlur?: React$1.FocusEventHandler<HTMLInputElement>;
+    errorMessage?: React$1.ReactNode;
+    labelColor?: string;
+    id?: string;
+    [key: string]: any;
+}
+/**
+ * Standard text input with label and validation message.
+ */
+declare function TextInput({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout, onBlur, errorMessage, labelColor, }: TextInputProps): react_jsx_runtime.JSX.Element;
+
+interface NumberInputProps {
+    step?: number;
+    value?: any;
+    onChange?: (e: {
+        target: {
+            value: number;
+            id?: string;
+            name?: string;
+        };
+    }) => void;
+    label?: React$1.ReactNode;
+    htmlFor?: string;
+    name?: string;
+    disabled?: boolean;
+    /** 'horizontal' | 'vertical' */
+    layout?: string;
+    errorMessage?: React$1.ReactNode;
+    inputStyle?: React$1.CSSProperties;
+    labelStyle?: React$1.CSSProperties;
+    placeholder?: string;
+    style?: React$1.CSSProperties;
+    min?: number;
+    max?: number;
+    readOnly?: boolean;
+    [key: string]: any;
+}
+/**
+ * Number input with increment / decrement controls.
+ */
+declare function NumberInput({ step, value, onChange, label, htmlFor, name, disabled, layout, errorMessage, inputStyle, labelStyle, placeholder, style, min, max, readOnly, }: NumberInputProps): react_jsx_runtime.JSX.Element;
+
+interface PasswordProps {
+    value?: any;
+    onChange?: React$1.ChangeEventHandler<HTMLInputElement>;
+    disabled?: boolean;
+    label?: React$1.ReactNode;
+    htmlFor?: string;
+    placeholder?: string;
+    name?: string;
+    inputStyle?: React$1.CSSProperties;
+    style?: React$1.CSSProperties;
+    layout?: string;
+    onBlur?: React$1.FocusEventHandler<HTMLInputElement>;
+    errorMessage?: React$1.ReactNode;
+    labelColor?: string;
+    iconColor?: string;
+    [key: string]: any;
+}
+/**
+ * Password input with show/hide toggle.
+ */
+declare function Password({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout, onBlur, errorMessage, labelColor, iconColor, }: PasswordProps): react_jsx_runtime.JSX.Element;
+
+interface SearchInputProps {
+    value?: any;
+    onChange?: React$1.ChangeEventHandler<HTMLInputElement>;
+    disabled?: boolean;
+    label?: React$1.ReactNode;
+    htmlFor?: string;
+    placeholder?: string;
+    name?: string;
+    inputStyle?: React$1.CSSProperties;
+    style?: React$1.CSSProperties;
+    layout?: string;
+    [key: string]: any;
+}
+/**
+ * Search text field with a magnifier icon on the right.
+ */
+declare const SearchInput: React$1.ForwardRefExoticComponent<Omit<SearchInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+
+interface DropdownPillProps {
+    value?: React.ReactNode;
+    hasSiblings?: boolean;
+}
+/**
+ * Pill chip used inside Dropdown to display selected values.
+ */
+declare function DropdownPill({ value, hasSiblings }: DropdownPillProps): react_jsx_runtime.JSX.Element;
+
+interface CheckboxProps {
+    /** 'vertical' | 'horizontal' */
+    layout?: string;
+    /** 'left' | 'right' (label side when horizontal) */
+    labelPosition?: string;
+    label?: React$1.ReactNode;
+    name?: string;
+    htmlFor?: string;
+    errorMessage?: React$1.ReactNode;
+    value?: boolean;
+    onChange?: (e: {
+        target: {
+            value: boolean;
+            id?: string;
+            name?: string;
+        };
+    }) => void;
+    [key: string]: any;
+}
+/**
+ * Accessible checkbox powered by Radix Checkbox.
+ *
+ * Radix handles keyboard activation, focus ring, and ARIA checked state.
+ * Emits a synthetic `{ target: { value, id, name } }` event to stay
+ * compatible with existing form-change handlers.
+ *
+ * @example
+ * <Checkbox
+ *   htmlFor="agree"
+ *   label="I agree to the terms"
+ *   value={form.agree}
+ *   onChange={({ target }) => setField('agree', target.value)}
+ * />
+ */
+declare function Checkbox({ layout, labelPosition, label, name, htmlFor, errorMessage, value, onChange, }: CheckboxProps): react_jsx_runtime.JSX.Element;
+
+interface SwitchInputProps {
+    checked?: boolean;
+    onChange?: (e: {
+        target: {
+            checked: boolean;
+        };
+    }) => void;
+    checkedIcon?: React$1.ReactNode;
+    uncheckedIcon?: React$1.ReactNode;
+    [key: string]: any;
+}
+/**
+ * Form switch (on/off toggle) powered by Radix Switch.
+ *
+ * Radix handles keyboard activation, focus ring, and `role="switch"` ARIA.
+ * Accepts optional icon slots for the thumb in checked/unchecked states.
+ *
+ * Emits `{ target: { checked } }` for compatibility with existing handlers.
+ *
+ * @example
+ * <Switch
+ *   checked={form.enabled}
+ *   onChange={({ target }) => setField('enabled', target.checked)}
+ * />
+ */
+declare function Switch({ checked, onChange, checkedIcon, uncheckedIcon, }: SwitchInputProps): react_jsx_runtime.JSX.Element;
+
+interface DropdownItem {
+    key: string | number;
+    label: React$1.ReactNode;
+    icon?: React$1.ReactNode;
+}
+interface DropdownProps {
+    isMultiselect?: boolean;
+    hasSearch?: boolean;
+    label?: React$1.ReactNode;
+    name?: string;
+    value?: any;
+    onChange?: (e: {
+        target: {
+            value: any;
+            id?: string;
+            name?: string;
+        };
+    }) => void;
+    onBlur?: React$1.FocusEventHandler;
+    disabled?: boolean;
+    /** 'horizontal' | 'vertical' */
+    layout?: string;
+    errorMessage?: React$1.ReactNode;
+    style?: React$1.CSSProperties;
+    htmlFor?: string;
+    items?: DropdownItem[];
+    labelStyle?: React$1.CSSProperties;
+    placeholder?: string;
+    [key: string]: any;
+}
+/**
+ * Select / multi-select dropdown powered by Radix Popover.
+ *
+ * Radix handles focus-trap within the popover, keyboard dismiss (Escape),
+ * and correct portal-based z-index stacking.
+ *
+ * Emits `{ target: { value, id, name } }` for form-compatibility.
+ *
+ * @example
+ * // Single-select
+ * <Dropdown label="Vessel" items={vessels} value={form.vessel} onChange={handleChange} htmlFor="vessel" />
+ *
+ * // Multi-select
+ * <Dropdown isMultiselect label="Fuels" items={fuels} value={form.fuels} onChange={handleChange} />
+ */
+declare function Dropdown({ isMultiselect, hasSearch, label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, labelStyle, placeholder, }: DropdownProps): react_jsx_runtime.JSX.Element;
+
+interface AutoCompleteItem {
+    key: string;
+    value: string;
+    label: string;
+    icon?: React$1.ReactNode;
+}
+interface AutoCompleteProps {
+    disabled?: boolean;
+    label?: React$1.ReactNode;
+    placeholder?: string;
+    name?: string;
+    inputStyle?: React$1.CSSProperties;
+    style?: React$1.CSSProperties;
+    /** 'horizontal' | 'vertical' */
+    layout?: string;
+    items?: AutoCompleteItem[];
+    onItemClick?: (value: string) => void;
+    /** Custom "empty" message */
+    emptyText?: string;
+    [key: string]: any;
+}
+/**
+ * Search-as-you-type autocomplete powered by Radix Popover.
+ *
+ * The popover opens when the input is focused and closes when an item is
+ * selected or the user clicks away. Radix handles portal-based z-stacking.
+ *
+ * @example
+ * <AutoComplete
+ *   label="Vessel"
+ *   items={vessels.map(v => ({ key: v.imo, value: v.imo, label: v.name }))}
+ *   onItemClick={(imo) => setVessel(imo)}
+ * />
+ */
+declare function AutoComplete({ disabled, label, placeholder, name, inputStyle, style, layout, items, onItemClick, emptyText, }: AutoCompleteProps): react_jsx_runtime.JSX.Element;
+
+interface TreeSelectItem {
+    key: string | number;
+    label: React$1.ReactNode;
+    icon?: React$1.ReactNode;
+}
+interface TreeSelectProps {
+    hasSearch?: boolean;
+    label?: React$1.ReactNode;
+    name?: string;
+    value?: any;
+    onChange?: (e: {
+        target: {
+            value: any;
+            id?: string;
+            name?: string;
+        };
+    }) => void;
+    onBlur?: React$1.FocusEventHandler;
+    disabled?: boolean;
+    /** 'horizontal' | 'vertical' */
+    layout?: string;
+    errorMessage?: React$1.ReactNode;
+    style?: React$1.CSSProperties;
+    htmlFor?: string;
+    items?: TreeSelectItem[];
+}
+/**
+ * Single-value select with a flat list, powered by Radix Popover.
+ * Functionally similar to Dropdown (single-select only).
+ *
+ * @example
+ * <TreeSelect label="Fleet" items={fleets} value={form.fleet} onChange={handleChange} htmlFor="fleet" />
+ */
+declare function TreeSelect({ label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, }: TreeSelectProps): react_jsx_runtime.JSX.Element;
+
+interface FileInputProps {
+    allowMultiple?: boolean;
+    onChange?: (e: {
+        target: {
+            files: File[];
+            name?: string;
+            id?: string;
+            value?: string;
+        };
+    }) => void;
+    name?: string;
+    /** Accepted MIME types / extensions */
+    accept?: string;
+    [key: string]: any;
+}
+/**
+ * Drag-and-drop / click file input.
+ *
+ * Decoupled from ThemeContext — uses CSS `dark:` classes.
+ *
+ * @example
+ * <FileInput
+ *   name="xlsxUpload"
+ *   accept=".xlsx"
+ *   onChange={(e) => setFile(e.target.files[0])}
+ * />
+ */
+declare function FileInput({ allowMultiple, onChange, name, accept, }: FileInputProps): react_jsx_runtime.JSX.Element;
+
+/** ─────────────────── DatePicker ─────────────────── */
+interface DatePickerProps {
+    value: Date;
+    onChange: (e: {
+        target: {
+            value: Date;
+            id?: string;
+            name?: string;
+        };
+    }) => void;
+    layout?: 'horizontal' | 'vertical';
+    label?: React$1.ReactNode;
+    htmlFor?: string;
+    name?: string;
+    style?: React$1.CSSProperties;
+    errorMessage?: React$1.ReactNode;
+    disableBefore?: Date | string;
+    disableAfter?: Date | string;
+    disabled?: boolean;
+}
+/**
+ * Custom calendar date picker.
+ *
+ * @example
+ * <DatePicker.DatePicker
+ *   label="Report date"
+ *   value={form.date}
+ *   onChange={({ target }) => setField('date', target.value)}
+ *   disableAfter={new Date()}
+ * />
+ */
+declare function DatePickerBase({ value, onChange, layout, label, htmlFor, name, style, errorMessage, disableBefore, disableAfter, disabled, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+/** ─────────────────── TemporalPicker (year/number scroll) ─────────────────── */
+interface TemporalPickerProps {
+    value: number;
+    onChange: (e: {
+        target: {
+            value: number;
+        };
+    }) => void;
+    type?: 'year';
+    upperLimit?: number;
+    lowerLimit?: number;
+    errorMessage?: React$1.ReactNode;
+    label?: React$1.ReactNode;
+    layout?: string;
+    style?: React$1.CSSProperties;
+}
+declare function TemporalPickerBase({ value, onChange, lowerLimit, upperLimit, errorMessage, label, layout, style, }: TemporalPickerProps): react_jsx_runtime.JSX.Element;
+/** ─────────────────── Namespace export ─────────────────── */
+/**
+ * Temporal date/time picker namespace.
+ *
+ * @example
+ * import Temporal from '@geomak/ui'
+ *
+ * <Temporal.DatePicker value={date} onChange={handleChange} label="Date" />
+ * <Temporal.TemporalPicker value={year} type="year" lowerLimit={2018} upperLimit={2026} onChange={handleChange} />
+ */
+declare const Temporal: {
+    DatePicker: typeof DatePickerBase;
+    TemporalPicker: typeof TemporalPickerBase;
+};
+
+export { AutoComplete, type AutoCompleteProps, Button, type ButtonProps, COLORS, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownPill, type DropdownPillProps, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, FileInput, type FileInputProps, GridCard, type GridCardItem, type GridCardProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MenuBar, MenuBarItem, type MenuBarItemConfig, type MenuBarItemProps, type MenuBarProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, type PaginationOptions, Password, type PasswordProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Temporal, type TemporalPickerProps, TextInput, type TextInputProps, Switch$1 as ThemeSwitch, type ThemeSwitchProps, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Wizard, type WizardProps, type WizardStep, useNotification };