@tangible/ui 0.0.1

package/components/Modal/Modal.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { cx } from '../../utils/cx.js';
+import { PREFIX } from '../../constants.js';
+import { getPortalRootFor } from '../../utils/portal.js';
+import { useFocusTrap, getInitialFocus } from '../../utils/focus-trap.js';
+import { ModalContext, useModalContext } from './context.js';
+import { IconButton } from '../IconButton/index.js';
+const isBrowser = typeof document !== 'undefined';
+function ModalRoot({ isOpen, onClose, size = 'md', stickyHead, stickyFoot, labelledBy, describedBy, initialFocusSelector, container, showCloseButton, closeLabel = 'Close', closeOnBackdropClick = true, closeOnEscape = true, children, }) {
+    const dialogRef = useRef(null);
+    const restoreRef = useRef(null);
+    const [mount, setMount] = useState(null);
+    // Capture trigger element and compute portal mount point when modal opens.
+    // Uses useLayoutEffect to run before paint — both renders complete before
+    // the browser shows anything, so no visible delay.
+    //
+    // NOTE: This assumes document.activeElement is the trigger at open time.
+    // True for click/keyboard handlers. For programmatic opens (timers, effects),
+    // the captured element may not be meaningful — focus restore still works,
+    // portal scoping may fall back to global interface.
+    useLayoutEffect(() => {
+        if (!isOpen || !isBrowser) {
+            return;
+        }
+        if (mount)
+            return; // Already captured for this open cycle
+        const trigger = document.activeElement;
+        restoreRef.current = trigger;
+        setMount(container ?? getPortalRootFor(trigger));
+    }, [isOpen, container, mount]);
+    // Reset state when modal closes, restore focus to trigger.
+    useEffect(() => {
+        if (isOpen)
+            return;
+        const el = restoreRef.current;
+        if (el && typeof el.focus === 'function') {
+            el.focus();
+        }
+        restoreRef.current = null;
+        setMount(null);
+    }, [isOpen]);
+    // Body scroll lock.
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        document.body.classList.add('tui-modal-open');
+        return () => {
+            document.body.classList.remove('tui-modal-open');
+        };
+    }, [isOpen]);
+    // Focus trap (handles Tab cycling and ESC to close).
+    useFocusTrap(dialogRef, {
+        isActive: isOpen,
+        onEscape: onClose,
+        escapeDeactivates: closeOnEscape,
+    });
+    // Make scrollable region focusable; set initial focus.
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        // Ensure scrollable body section is keyboard-focusable for a11y audits.
+        // WCAG 4.1.2: focusable elements need accessible names.
+        const scrollables = dialog.querySelectorAll(`.${PREFIX}-modal__body-inner, [data-scrollable="true"]`);
+        scrollables.forEach((el) => {
+            const hasOverflow = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
+            if (hasOverflow && !el.hasAttribute('tabindex')) {
+                el.setAttribute('tabindex', '0');
+                if (!el.hasAttribute('aria-label') && !el.hasAttribute('aria-labelledby')) {
+                    el.setAttribute('aria-label', 'Scrollable content');
+                }
+            }
+        });
+        // Initial focus target.
+        let target = null;
+        if (initialFocusSelector) {
+            target = dialog.querySelector(initialFocusSelector);
+            if (!target && import.meta.env.DEV) {
+                console.warn(`Modal: initialFocusSelector="${initialFocusSelector}" did not match any element. ` +
+                    `Falling back to first focusable element.`);
+            }
+        }
+        if (!target) {
+            target = getInitialFocus(dialog);
+        }
+        target.focus({ preventScroll: true });
+        // Development warning for missing labelledBy target
+        if (import.meta.env.DEV && labelledBy) {
+            const labelElement = document.getElementById(labelledBy);
+            if (!labelElement) {
+                console.warn(`Modal: aria-labelledby="${labelledBy}" references a non-existent element. ` +
+                    `Ensure an element with id="${labelledBy}" exists inside the modal.`);
+            }
+        }
+    }, [isOpen, initialFocusSelector, labelledBy]);
+    // Memoize context value to prevent unnecessary re-renders
+    const contextValue = useMemo(() => ({ onClose }), [onClose]);
+    if (!isOpen || !mount)
+        return null;
+    return createPortal(_jsx(ModalContext.Provider, { value: contextValue, children: _jsxs("div", { className: "tui-modal", "data-state": "open", children: [_jsx("div", { className: "tui-modal__backdrop", onClick: closeOnBackdropClick ? onClose : undefined }), _jsxs("div", { ref: dialogRef, role: "dialog", "aria-modal": "true", "aria-labelledby": labelledBy, "aria-describedby": describedBy, className: cx('tui-modal__dialog', `is-size-${size}`, stickyHead && 'is-sticky-head', stickyFoot && 'is-sticky-foot'), tabIndex: -1, children: [showCloseButton && (_jsx(IconButton, { icon: "system/close", label: closeLabel, variant: "ghost", size: "sm", onClick: onClose, className: "tui-modal__close", showTooltip: true })), children] })] }) }), mount);
+}
+function ModalClose({ label = 'Close', className }) {
+    const { onClose } = useModalContext();
+    return (_jsx(IconButton, { icon: "system/close", label: label, variant: "ghost", size: "sm", onClick: onClose, className: cx('tui-modal__close', className), showTooltip: true }));
+}
+ModalClose.displayName = 'Modal.Close';
+function ModalHead({ className, children, ...rest }) {
+    return (_jsx("div", { className: cx('tui-modal__head', className), ...rest, children: children }));
+}
+ModalHead.displayName = 'Modal.Head';
+// =============================================================================
+// Modal.Body — Scrollable content area with min-height
+// =============================================================================
+function ModalBody({ className, children, ...rest }) {
+    return (_jsx("div", { className: cx('tui-modal__body', className), ...rest, children: _jsx("div", { className: "tui-modal__body-inner", children: children }) }));
+}
+ModalBody.displayName = 'Modal.Body';
+// =============================================================================
+// Modal.Foot — Footer slot
+// =============================================================================
+function ModalFoot({ className, children, ...rest }) {
+    return (_jsx("div", { className: cx('tui-modal__foot', className), ...rest, children: children }));
+}
+ModalFoot.displayName = 'Modal.Foot';
+export const Modal = ModalRoot;
+Modal.Head = ModalHead;
+Modal.Body = ModalBody;
+Modal.Foot = ModalFoot;
+Modal.Close = ModalClose;

package/components/Modal/context.d.ts

@@ -0,0 +1,6 @@
+type ModalContextValue = {
+    onClose: () => void;
+};
+export declare const ModalContext: import("react").Context<ModalContextValue | null>;
+export declare function useModalContext(): ModalContextValue;
+export {};

package/components/Modal/context.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export const ModalContext = createContext(null);
+export function useModalContext() {
+    const ctx = useContext(ModalContext);
+    if (!ctx) {
+        throw new Error('Modal.Close must be used within a Modal component');
+    }
+    return ctx;
+}

package/components/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export { Modal } from './Modal';
+export type { ModalProps } from './Modal';

package/components/Modal/index.js

@@ -0,0 +1 @@
+export { Modal } from './Modal.js';

package/components/Notice/Notice.d.ts

@@ -0,0 +1,93 @@
+import React from 'react';
+import type { JSX } from 'react';
+import type { ThemeStatus } from '../../types';
+type RootAs = 'section' | 'div';
+type HeadingAs = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+type NoticeTheme = ThemeStatus;
+type NoticeAnnounce = 'off' | 'polite' | 'assertive';
+export type NoticeExitAnimation = 'collapse' | 'fade' | 'none';
+type CommonProps = {
+    /** Inline layout: icon/title on left, content center, actions right */
+    inline?: boolean;
+    /** Add box shadow */
+    elevated?: boolean;
+    /**
+     * Enable hover/focus visual states. If combined with onClick,
+     * adds role="button" and keyboard handling (Enter/Space).
+     */
+    interactive?: boolean;
+    /** Disable interactions */
+    disabled?: boolean;
+    /** Show left accent stripe in theme color */
+    stripe?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export type NoticeProps<TAs extends RootAs = 'section'> = CommonProps & {
+    as?: TAs;
+    /** Visual intent */
+    theme?: NoticeTheme;
+    /**
+     * Controls screen-reader announcement behavior.
+     * - off: no live region
+     * - polite: role=status
+     * - assertive: role=alert
+     */
+    announce?: NoticeAnnounce;
+    /**
+     * Accessible name when there is no visible title in Notice.Head.
+     * Only use when Notice.Head has no title prop - if both exist, the visible title takes precedence.
+     */
+    ariaLabel?: string;
+    /** Renders a dismiss button */
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    dismissLabel?: string;
+    /**
+     * Exit animation to play when dismissed.
+     * - none: onDismiss called immediately (default)
+     * - collapse: fade + height collapse (for inline/block notices)
+     * - fade: fade out with slight scale (for overlays/toasts)
+     */
+    exitAnimation?: NoticeExitAnimation;
+    /**
+     * If true, the notice container will be focusable (tabIndex=-1).
+     * Useful for programmatic focus management in toast/notification systems.
+     * Not for keyboard navigation - use interactive + onClick for clickable notices.
+     */
+    focusable?: boolean;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    children?: React.ReactNode;
+};
+type SlotProps = React.HTMLAttributes<HTMLDivElement> & {
+    className?: string;
+    children?: React.ReactNode;
+};
+type HeadSlotProps = SlotProps & {
+    /** Icon content */
+    icon?: React.ReactNode;
+    /** Title text */
+    title?: React.ReactNode;
+    /** Heading level for title */
+    titleAs?: HeadingAs;
+};
+/** Handle exposed via ref for imperative control */
+export type NoticeHandle = {
+    /** The underlying DOM element */
+    element: HTMLElement | null;
+    /**
+     * Trigger exit animation programmatically.
+     * Returns a promise that resolves when animation completes.
+     */
+    exit: (animation?: 'collapse' | 'fade') => Promise<void>;
+};
+type NoticeCompound = {
+    <TAs extends RootAs = 'section'>(props: NoticeProps<TAs> & Omit<React.ComponentPropsWithoutRef<TAs>, keyof NoticeProps> & {
+        ref?: React.Ref<NoticeHandle>;
+    }): JSX.Element;
+    Head: React.FC<HeadSlotProps>;
+    Body: React.FC<SlotProps>;
+    Foot: React.FC<SlotProps>;
+};
+export declare const Notice: NoticeCompound;
+export {};

package/components/Notice/Notice.js

@@ -0,0 +1,144 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef, useId, useMemo, useState, useRef, useImperativeHandle, useCallback, useEffect, useContext, createContext } from 'react';
+import { cx } from '../../utils/cx.js';
+import { IconButton } from '../IconButton/index.js';
+const NoticeContext = createContext(null);
+/** Check if user prefers reduced motion */
+function prefersReducedMotion() {
+    if (typeof window === 'undefined')
+        return false;
+    return window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+}
+export const Notice = forwardRef(function Notice({ as = 'section', inline, elevated, interactive, disabled, stripe, className, style, onClick, theme = 'info', announce = 'off', ariaLabel, dismissible, onDismiss, dismissLabel = 'Dismiss', exitAnimation = 'none', focusable, children, ...rest }, ref) {
+    const Tag = as;
+    const innerRef = useRef(null);
+    const [isExiting, setIsExiting] = useState(false);
+    const [exitType, setExitType] = useState(null);
+    const exitResolveRef = useRef(null);
+    // Track titleId from Notice.Head for aria-labelledby coordination
+    const [titleId, setTitleId] = useState(null);
+    const contextValue = useMemo(() => ({ setTitleId }), []);
+    // Cleanup on unmount - resolve any pending exit promise
+    useEffect(() => {
+        return () => {
+            if (exitResolveRef.current) {
+                exitResolveRef.current();
+                exitResolveRef.current = null;
+            }
+        };
+    }, []);
+    // Listen for animation end to resolve exit promise
+    // Also handle prefers-reduced-motion where animation is disabled
+    useEffect(() => {
+        const element = innerRef.current;
+        if (!isExiting || !element)
+            return;
+        // If user prefers reduced motion, resolve immediately (CSS disables animation)
+        if (prefersReducedMotion()) {
+            if (exitResolveRef.current) {
+                exitResolveRef.current();
+                exitResolveRef.current = null;
+            }
+            return;
+        }
+        const handleAnimationEnd = (e) => {
+            // Only handle our exit animations
+            if (e.target !== element)
+                return;
+            if (exitResolveRef.current) {
+                exitResolveRef.current();
+                exitResolveRef.current = null;
+            }
+        };
+        element.addEventListener('animationend', handleAnimationEnd);
+        return () => element.removeEventListener('animationend', handleAnimationEnd);
+    }, [isExiting]);
+    // Imperative exit method
+    const exit = useCallback((animation) => {
+        // If exitAnimation is 'none' and no override provided, resolve immediately
+        const animationType = animation ?? (exitAnimation !== 'none' ? exitAnimation : undefined);
+        if (!animationType) {
+            return Promise.resolve();
+        }
+        // If user prefers reduced motion, resolve immediately
+        if (prefersReducedMotion()) {
+            setExitType(animationType);
+            setIsExiting(true);
+            return Promise.resolve();
+        }
+        return new Promise((resolve) => {
+            exitResolveRef.current = resolve;
+            setExitType(animationType);
+            setIsExiting(true);
+        });
+    }, [exitAnimation]);
+    // Handle dismiss button click
+    const handleDismiss = useCallback(async () => {
+        if (disabled)
+            return;
+        if (exitAnimation !== 'none') {
+            await exit(exitAnimation);
+        }
+        onDismiss?.();
+    }, [disabled, exitAnimation, exit, onDismiss]);
+    // Expose imperative handle as plain object (not mutating DOM element)
+    useImperativeHandle(ref, () => ({
+        element: innerRef.current,
+        exit,
+    }), [exit]);
+    // Keyboard handler for interactive notices
+    const handleKeyDown = useCallback((e) => {
+        if (!interactive || !onClick || disabled)
+            return;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onClick(e);
+        }
+    }, [interactive, onClick, disabled]);
+    // A11y role mapping
+    const liveRole = announce === 'assertive' ? 'alert' : announce === 'polite' ? 'status' : undefined;
+    // Use titleId from Notice.Head if available, otherwise check ariaLabel
+    const isNamed = Boolean(titleId) || Boolean(ariaLabel);
+    const regionRole = !liveRole && isNamed ? 'region' : undefined;
+    // If interactive + onClick, behave as button
+    const isClickable = interactive && onClick && !disabled;
+    const computedRole = isClickable ? 'button' : (liveRole ?? regionRole);
+    // aria-labelledby takes precedence over aria-label when titleId exists
+    const computedLabelledBy = titleId || undefined;
+    const computedAriaLabel = titleId ? undefined : ariaLabel;
+    const classes = cx('tui-notice', `is-theme-${theme}`, inline && 'is-layout-inline', elevated && 'is-style-elevated', interactive && 'has-interaction', disabled && 'is-disabled', stripe && 'has-stripe', dismissible && 'is-dismissible', focusable && 'is-focusable', isExiting && exitType && `is-exiting-${exitType}`, className);
+    // Dismiss button component
+    const dismissButton = dismissible && (_jsx(IconButton, { icon: "system/close", label: dismissLabel, size: "sm", variant: "ghost", className: "tui-notice__dismiss", onClick: (e) => {
+            e.stopPropagation();
+            handleDismiss();
+        }, disabled: disabled || isExiting }));
+    // Determine tabIndex: clickable gets 0, focusable gets -1, otherwise none
+    const computedTabIndex = isClickable ? 0 : (focusable ? -1 : undefined);
+    return (_jsx(NoticeContext.Provider, { value: contextValue, children: _jsxs(Tag, { ref: innerRef, className: classes, style: style, "aria-disabled": disabled || undefined, role: computedRole, "aria-labelledby": computedLabelledBy, "aria-label": computedAriaLabel, "aria-atomic": liveRole ? true : undefined, tabIndex: computedTabIndex, onClick: disabled ? undefined : onClick, onKeyDown: isClickable ? handleKeyDown : undefined, ...rest, children: [_jsx("div", { className: "tui-notice__inner", children: children }), dismissButton] }) }));
+});
+// Notice.Head renders icon and title (consumers can add custom actions via children)
+function NoticeHead({ className, icon, title, titleAs = 'h3', children, ...rest }) {
+    const context = useContext(NoticeContext);
+    const reactId = useId();
+    const titleId = useMemo(() => title ? `tui-notice-title-${reactId}` : null, [title, reactId]);
+    // Register titleId with parent Notice for aria-labelledby coordination
+    useEffect(() => {
+        if (context && titleId) {
+            context.setTitleId(titleId);
+            return () => context.setTitleId(null);
+        }
+    }, [context, titleId]);
+    return (_jsxs("div", { className: cx('tui-notice__head', className), ...rest, children: [icon && _jsx("div", { className: "tui-notice__icon", children: icon }), title && React.createElement(titleAs, { id: titleId, className: 'tui-notice__title' }, title), children] }));
+}
+NoticeHead.displayName = 'Notice.Head';
+function NoticeBody({ className, children, ...rest }) {
+    return (_jsx("div", { className: cx('tui-notice__body', className), ...rest, children: children }));
+}
+NoticeBody.displayName = 'Notice.Body';
+function NoticeFoot({ className, children, ...rest }) {
+    return (_jsx("div", { className: cx('tui-notice__foot', className), ...rest, children: children }));
+}
+NoticeFoot.displayName = 'Notice.Foot';
+Notice.Head = NoticeHead;
+Notice.Body = NoticeBody;
+Notice.Foot = NoticeFoot;

package/components/Notice/index.d.ts

@@ -0,0 +1,2 @@
+export { Notice } from './Notice';
+export type { NoticeProps, NoticeHandle, NoticeExitAnimation } from './Notice';

package/components/Notice/index.js

@@ -0,0 +1 @@
+export { Notice } from './Notice.js';

package/components/OverlapStack/OverlapStack.d.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+export interface OverlapStackProps {
+    /** Overlap amount in pixels (negative) or CSS length string. */
+    overlap?: number | string;
+    /** Maximum visible items. Overflow becomes +N badge. */
+    max?: number;
+    /**
+     * Enable clipping frame on item wrappers.
+     * Adds border-radius and overflow:hidden. Customise via tokens:
+     * - `--tui-overlap-stack-item-radius` (default: full)
+     * - `--tui-overlap-stack-border-width` (default: 0)
+     * - `--tui-overlap-stack-border-color` (default: bg-surface)
+     */
+    frame?: boolean;
+    /** Custom renderer for overflow badge. Receives count of hidden items. */
+    renderOverflow?: (count: number) => ReactNode;
+    /**
+     * Accessible label for the overflow badge. For i18n support.
+     * Function receives count and returns label string.
+     * @default (count) => `${count} more`
+     */
+    overflowLabel?: (count: number) => string;
+    /** Accessible label for the stack group. Adds role="group" when provided. */
+    'aria-label'?: string;
+    /** ID of element labelling the stack. Adds role="group" when provided. */
+    'aria-labelledby'?: string;
+    /** Children to stack */
+    children: ReactNode;
+    /** Additional class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+}
+export interface OverlapStackOverflowProps {
+    children: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    /** Accessible label for overflow badge */
+    'aria-label'?: string;
+}
+declare const OverlapStack: import("react").ForwardRefExoticComponent<OverlapStackProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Overflow: import("react").ForwardRefExoticComponent<OverlapStackOverflowProps & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export { OverlapStack };

package/components/OverlapStack/OverlapStack.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, forwardRef, isValidElement } from 'react';
+import { cx } from '../../utils/cx.js';
+// =============================================================================
+// Overflow Component
+// =============================================================================
+const OverlapStackOverflow = forwardRef(function OverlapStackOverflow({ children, className, style, 'aria-label': ariaLabel }, ref) {
+    return (_jsx("span", { ref: ref, className: cx('tui-overlap-stack__overflow', className), style: style, "aria-label": ariaLabel, children: children }));
+});
+// =============================================================================
+// Main Component
+// =============================================================================
+// Low z-index base — only needs relative ordering among siblings
+const Z_INDEX_BASE = 10;
+const defaultOverflowLabel = (count) => `${count} more`;
+const OverlapStackRoot = forwardRef(function OverlapStack({ overlap, max, frame, renderOverflow, overflowLabel = defaultOverflowLabel, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, children, className, style, }, ref) {
+    const childArray = Children.toArray(children).filter(isValidElement);
+    const totalCount = childArray.length;
+    // Determine visible children and overflow count
+    const hasOverflow = max !== undefined && totalCount > max;
+    const visibleChildren = hasOverflow ? childArray.slice(0, max) : childArray;
+    const overflowCount = hasOverflow ? totalCount - max : 0;
+    // Set overlap token when provided (otherwise CSS default applies)
+    const cssVars = (overlap !== undefined
+        ? { '--tui-overlap-stack-overlap': typeof overlap === 'number' ? `${overlap}px` : overlap }
+        : {});
+    // Only add role="group" when accessible name is provided
+    const hasAccessibleName = ariaLabel !== undefined || ariaLabelledby !== undefined;
+    // Default overflow renderer uses overflowLabel for i18n
+    const defaultOverflow = (count) => (_jsxs(OverlapStackOverflow, { "aria-label": overflowLabel(count), children: ["+", count] }));
+    const overflowRenderer = renderOverflow ?? defaultOverflow;
+    return (_jsxs("div", { ref: ref, role: hasAccessibleName ? 'group' : undefined, className: cx('tui-overlap-stack', className), style: { ...cssVars, ...style }, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children: [visibleChildren.map((child, index) => (_jsx("span", { className: cx('tui-overlap-stack__item', frame && 'is-framed'), style: { zIndex: Z_INDEX_BASE - index }, children: child }, child.key ?? index))), hasOverflow && (_jsx("span", { className: cx('tui-overlap-stack__item', frame && 'is-framed'), style: { zIndex: Z_INDEX_BASE - visibleChildren.length }, children: overflowRenderer(overflowCount) }))] }));
+});
+// Display names for React DevTools
+OverlapStackRoot.displayName = 'OverlapStack';
+OverlapStackOverflow.displayName = 'OverlapStack.Overflow';
+// Compound component pattern
+const OverlapStack = Object.assign(OverlapStackRoot, {
+    Overflow: OverlapStackOverflow,
+});
+export { OverlapStack };

package/components/OverlapStack/index.d.ts

@@ -0,0 +1,2 @@
+export { OverlapStack } from './OverlapStack';
+export type { OverlapStackProps, OverlapStackOverflowProps } from './OverlapStack';

package/components/OverlapStack/index.js

@@ -0,0 +1 @@
+export { OverlapStack } from './OverlapStack.js';

package/components/Pager/Pager.d.ts

@@ -0,0 +1,26 @@
+export type PagerMode = 'simple' | 'ends' | 'full' | 'smart';
+export type PagerProps = {
+    /** Current page (1-indexed) */
+    currentPage: number;
+    /** Total number of pages */
+    totalPages: number;
+    /** Called when user selects a different page */
+    onPageChange: (page: number) => void;
+    /** Current page size (for page size selector) */
+    pageSize?: number;
+    /** Available page size options */
+    pageSizeOptions?: number[];
+    /** Called when user changes page size */
+    onPageSizeChange?: (size: number) => void;
+    /** Pagination mode: 'simple' (prev/next only), 'ends', 'full', 'smart' */
+    mode?: PagerMode;
+    /** Max page number buttons in smart mode */
+    maxNumbers?: number;
+    /** Style for prev/next: 'text' shows labels, 'icon' shows chevrons */
+    navStyle?: 'text' | 'icon';
+    /** Hide the entire pager (useful when only 1 page) */
+    hidden?: boolean;
+    /** Additional class name */
+    className?: string;
+};
+export declare function Pager({ currentPage, totalPages, onPageChange, pageSize, pageSizeOptions, onPageSizeChange, mode, maxNumbers, navStyle, hidden, className, }: PagerProps): import("react/jsx-runtime").JSX.Element | null;