@ssa-ui-kit/core 2.33.0 → 3.0.0

package/dist/components/Modal/Modal.d.ts

@@ -1,3 +1,63 @@
 import { ModalProps } from './types';
+/**
+ * Modal - Dialog overlay for focused user interaction
+ *
+ * A compound component that provides a modal dialog with built-in state management,
+ * trigger and dismiss buttons, and optional portal rendering. Use Modal (root),
+ * ModalOpenButton (activator), ModalContent (dialog body), and ModalDismissButton
+ * (close) together. ModalContent can render in a portal to document.body (usePortal)
+ * or in place for use inside other overlays (e.g. Drawer).
+ *
+ * @category Components
+ * @subcategory Overlay
+ *
+ * @example
+ * ```tsx
+ * // Basic modal
+ * <Modal>
+ *   <ModalOpenButton>
+ *     <Button>Open modal</Button>
+ *   </ModalOpenButton>
+ *   <ModalContent aria-label="Example modal">
+ *     <div>
+ *       <h3>Title</h3>
+ *       <p>Content</p>
+ *       <ModalDismissButton>
+ *         <Button variant="secondary">Close</Button>
+ *       </ModalDismissButton>
+ *     </div>
+ *   </ModalContent>
+ * </Modal>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Controlled from parent
+ * const [isOpen, setIsOpen] = useState(false);
+ * <Modal isOpen={isOpen}>
+ *   <ModalContent aria-label="Controlled modal">
+ *     <ModalDismissButton><Button onClick={() => setIsOpen(false)}>Close</Button></ModalDismissButton>
+ *   </ModalContent>
+ * </Modal>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Modal with portal (e.g. inside Drawer) - centers on full screen
+ * <ModalContent aria-label="Modal in drawer" usePortal>
+ *   ...
+ * </ModalContent>
+ * ```
+ *
+ * @see {@link ModalContent} - Dialog content and container
+ * @see {@link ModalOpenButton} - Trigger to open
+ * @see {@link ModalDismissButton} - Trigger to close
+ *
+ * @accessibility
+ * - Focus trapped within modal when open
+ * - aria-label on ModalContent for screen readers
+ * - ESC to close (when implemented in ModalDialog)
+ * - Focus management on open/close
+ */
 declare const Modal: ({ isOpen, ...rest }: ModalProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Modal;

package/dist/components/Modal/types.d.ts

@@ -1,3 +1,23 @@
 import type { ModalDialogProps } from '../ModalDialog';
+/**
+ * Context value for Modal: [isOpen, setIsOpen].
+ * Provided by Modal (root) and consumed by ModalContent, ModalOpenButton, ModalDismissButton.
+ */
 export type ModalContextProps = [boolean, (isOpen: boolean) => void];
-export type ModalProps = Partial<ModalDialogProps>;
+/**
+ * Props for the Modal root and ModalContent components.
+ *
+ * Modal root accepts isOpen for controlled usage; ModalContent accepts
+ * ModalDialog props (aria-label, noBackground, className, children) plus usePortal.
+ *
+ * @example
+ * ```tsx
+ * <Modal isOpen={isOpen}>
+ *   <ModalContent aria-label="Dialog" usePortal>...</ModalContent>
+ * </Modal>
+ * ```
+ */
+export type ModalProps = Partial<ModalDialogProps> & {
+    /** When true, render modal in a portal to document.body. When false (default), render in place (e.g. inside a Drawer). */
+    usePortal?: boolean;
+};

package/dist/components/ModalContent/ModalContent.d.ts

@@ -1,3 +1,44 @@
 import { ModalProps } from '../Modal/types';
-declare function ModalContent({ children, 'aria-label': ariaLabel, ...props }: ModalProps): import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * ModalContent - Dialog content and overlay container
+ *
+ * Renders the modal dialog content when the modal is open. Uses ModalContext
+ * to read open state. Can render in place (default) or in a portal to
+ * document.body when usePortal is true (e.g. for modals inside a Drawer that
+ * should center on the full screen).
+ *
+ * Only renders when modal is open. Accepts ModalDialog props (aria-label,
+ * noBackground, className) and usePortal. Must be used within Modal.
+ *
+ * @category Components
+ * @subcategory Overlay
+ *
+ * @example
+ * ```tsx
+ * <Modal>
+ *   <ModalOpenButton><Button>Open</Button></ModalOpenButton>
+ *   <ModalContent aria-label="Example dialog">
+ *     <p>Content</p>
+ *     <ModalDismissButton><Button>Close</Button></ModalDismissButton>
+ *   </ModalContent>
+ * </Modal>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With portal (e.g. inside Drawer) - centers on full screen
+ * <ModalContent aria-label="Dialog" usePortal>
+ *   ...
+ * </ModalContent>
+ * ```
+ *
+ * @see {@link Modal} - Parent component that provides context
+ * @see {@link ModalOpenButton} - Trigger to open
+ * @see {@link ModalDismissButton} - Trigger to close
+ *
+ * @accessibility
+ * - aria-label should be set for screen readers
+ * - Renders in portal when usePortal for proper stacking
+ */
+declare function ModalContent({ children, 'aria-label': ariaLabel, usePortal, ...props }: ModalProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
 export default ModalContent;

package/dist/components/ModalDialog/ModalDialog.d.ts

@@ -1,3 +1,30 @@
 import { ModalDialogProps } from './types';
+/**
+ * ModalDialog - Presentational dialog container and overlay
+ *
+ * Renders the fixed full-screen overlay and centered dialog box. Used internally
+ * by ModalContent; typically not used directly. Handles visibility (display
+ * based on isOpen), optional background overlay (noBackground), and dialog
+ * ARIA attributes (role="dialog", aria-modal).
+ *
+ * @category Components
+ * @subcategory Overlay
+ *
+ * @example
+ * ```tsx
+ * // Usually used via ModalContent
+ * <ModalContent aria-label="My dialog">
+ *   <div>Dialog body</div>
+ * </ModalContent>
+ * ```
+ *
+ * @see {@link Modal} - Root component that provides state
+ * @see {@link ModalContent} - Wraps ModalDialog and handles portal
+ *
+ * @accessibility
+ * - role="dialog", aria-modal="true"
+ * - aria-label for screen reader label
+ * - Fixed overlay for focus containment
+ */
 declare const ModalDialog: ({ isOpen, noBackground, children, "aria-label": ariaLabel, ...props }: ModalDialogProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default ModalDialog;

package/dist/components/ModalDialog/types.d.ts

@@ -1,7 +1,25 @@
+/**
+ * Props for the ModalDialog presentational component.
+ *
+ * Used by ModalContent when rendering the dialog. isOpen controls visibility;
+ * noBackground removes the overlay; aria-label is required for accessibility.
+ *
+ * @example
+ * ```tsx
+ * <ModalDialog isOpen={true} aria-label="Confirm action">
+ *   <p>Are you sure?</p>
+ * </ModalDialog>
+ * ```
+ */
 export interface ModalDialogProps {
+    /** Whether the dialog is visible. When false, content is hidden (display: none). */
     isOpen: boolean;
+    /** When true, the overlay is transparent (no dimmed background). */
     noBackground?: boolean;
+    /** Accessible name for the dialog (required for screen readers). */
     'aria-label'?: string;
+    /** Dialog body content. */
     children?: React.ReactNode;
+    /** Optional CSS class for the inner dialog element. */
     className?: string;
 }

package/dist/components/ModalDismissButton/ModalDismissButton.d.ts

@@ -1,4 +1,31 @@
-declare function ModalDismissButton({ children: child }: {
-    children: JSX.Element;
+/**
+ * ModalDismissButton - Trigger element that closes the modal
+ *
+ * Wraps a single React element (typically a Button) and injects an onClick
+ * handler that closes the modal via ModalContext. Preserves the child's
+ * existing onClick by calling both. Must be used within Modal.
+ *
+ * @category Components
+ * @subcategory Overlay
+ *
+ * @example
+ * ```tsx
+ * <Modal>
+ *   <ModalOpenButton><Button>Open</Button></ModalOpenButton>
+ *   <ModalContent aria-label="Dialog">
+ *     <p>Content</p>
+ *     <ModalDismissButton>
+ *       <Button variant="secondary">Close</Button>
+ *     </ModalDismissButton>
+ *   </ModalContent>
+ * </Modal>
+ * ```
+ *
+ * @see {@link Modal} - Parent component that provides context
+ * @see {@link ModalContent} - Content container
+ * @see {@link ModalOpenButton} - Trigger to open
+ */
+declare function ModalDismissButton({ children: child, }: {
+    children: React.JSX.Element;
 }): import("react").FunctionComponentElement<any>;
 export default ModalDismissButton;

package/dist/components/ModalOpenButton/ModalOpenButton.d.ts

@@ -1,4 +1,28 @@
+/**
+ * ModalOpenButton - Trigger element that opens the modal
+ *
+ * Wraps a single React element (typically a Button) and injects an onClick
+ * handler that opens the modal via ModalContext. Preserves the child's
+ * existing onClick by calling both. Must be used within Modal.
+ *
+ * @category Components
+ * @subcategory Overlay
+ *
+ * @example
+ * ```tsx
+ * <Modal>
+ *   <ModalOpenButton>
+ *     <Button>Open modal</Button>
+ *   </ModalOpenButton>
+ *   <ModalContent aria-label="Dialog">...</ModalContent>
+ * </Modal>
+ * ```
+ *
+ * @see {@link Modal} - Parent component that provides context
+ * @see {@link ModalContent} - Content displayed when open
+ * @see {@link ModalDismissButton} - Trigger to close
+ */
 declare function ModalOpenButton({ children: child }: {
-    children: JSX.Element;
+    children: React.JSX.Element;
 }): import("react").FunctionComponentElement<any>;
 export default ModalOpenButton;

package/dist/components/NavBar/types.d.ts

@@ -8,7 +8,7 @@ export interface NavBarProps {
 export type CustomIconProps = (props: {
     className?: string;
     showIconTooltip?: boolean;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export type NavBarExtendedItem = {
     CustomIcon?: CustomIconProps;
     path: string;

package/dist/components/NotificationMenu/types.d.ts

@@ -1,10 +1,10 @@
 import { NotificationCardProps } from '../NotificationCard';
 export interface NotificationMenuProps {
-    trigger: string | JSX.Element;
+    trigger: string | React.JSX.Element;
     notifications: Array<NotificationCardProps>;
     children: React.ReactNode;
     onClick?: () => void;
     isLoading: boolean;
-    leftButton?: string | JSX.Element | null;
-    rightButton?: string | JSX.Element;
+    leftButton?: string | React.JSX.Element | null;
+    rightButton?: string | React.JSX.Element;
 }

package/dist/components/Pagination/ArrowButton.d.ts

@@ -1,2 +1,34 @@
 import { ArrowButtonProps } from './types';
+/**
+ * ArrowButton - Navigation arrow button for pagination
+ *
+ * Internal component used by Pagination to render previous/next navigation arrows.
+ * Displays a button with a carrot icon pointing left or right. Used for navigating
+ * between pages in the pagination component.
+ *
+ * @category Components
+ * @subcategory Navigation
+ *
+ * @example
+ * ```tsx
+ * // Used internally by Pagination component
+ * <ArrowButton
+ *   direction="left"
+ *   onClick={() => goToPreviousPage()}
+ *   isDisabled={isFirstPage}
+ * />
+ * ```
+ *
+ * @see {@link Pagination} - Parent component that uses this component
+ * @see {@link ArrowButtonProps} - Props interface
+ *
+ * @internal
+ * This component is not exported from the main index and is intended for
+ * internal use within the Pagination component.
+ *
+ * @accessibility
+ * - ARIA label set automatically based on direction
+ * - Keyboard navigation support via Button component
+ * - Screen reader friendly
+ */
 export declare const ArrowButton: ({ direction, onClick, isDisabled, className, }: ArrowButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Pagination/Pagination.d.ts

@@ -1,3 +1,84 @@
 import { PaginationProps } from './types';
+/**
+ * Pagination - Navigation controls for paginated data
+ *
+ * A comprehensive pagination component that provides navigation controls for
+ * paginated content. Supports page navigation with arrow buttons and numbered
+ * page buttons, optional manual page input, and optional rows per page selection.
+ * Uses PaginationContextProvider to manage page state and navigation.
+ *
+ * Component structure:
+ * - PaginationContextProvider (manages page state - required)
+ *   - Pagination (main component)
+ *     - RowsPerPageDropdown (optional)
+ *     - PageNumberInput (optional)
+ *     - ArrowButton (previous)
+ *     - PaginationButtons (numbered pages)
+ *     - ArrowButton (next)
+ *
+ * @category Components
+ * @subcategory Navigation
+ *
+ * @example
+ * ```tsx
+ * // Basic pagination
+ * <PaginationContextProvider selectedPage={1}>
+ *   <Pagination pagesCount={10} />
+ * </PaginationContextProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With rows per page dropdown
+ * <PaginationContextProvider selectedPage={1} defaultPerPage={25}>
+ *   <Pagination
+ *     pagesCount={20}
+ *     isRowPerPageVisible={true}
+ *     rowPerPageProps={{
+ *       rowsPerPageText: "Items per page",
+ *       rowsPerPageList: [
+ *         { id: 1, value: 10 },
+ *         { id: 2, value: 25 },
+ *         { id: 3, value: 50 },
+ *         { id: 4, value: 100 },
+ *       ],
+ *     }}
+ *   />
+ * </PaginationContextProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With manual page input
+ * <PaginationContextProvider selectedPage={3}>
+ *   <Pagination
+ *     pagesCount={15}
+ *     isPageSettingVisible={true}
+ *     pageNumberPlaceholder="Go to page"
+ *     errorTooltip="Please enter a valid page number"
+ *   />
+ * </PaginationContextProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Disabled pagination
+ * <PaginationContextProvider selectedPage={5}>
+ *   <Pagination pagesCount={10} isDisabled />
+ * </PaginationContextProvider>
+ * ```
+ *
+ * @see {@link PaginationContextProvider} - Required context provider for state management
+ * @see {@link RowsPerPageDropdown} - Optional component for rows per page selection
+ *
+ * @requires PaginationContextProvider - Must be wrapped in PaginationContextProvider
+ *
+ * @accessibility
+ * - ARIA navigation role and labels
+ * - Keyboard navigation support (Enter for page input)
+ * - Arrow keys navigation (via arrow buttons)
+ * - Screen reader friendly
+ * - Proper focus management
+ */
 declare const Pagination: ({ pagesCount, className, as, ariaLabel, isDisabled, pageNumberPlaceholder, errorTooltip, isPageSettingVisible, isPageFromCountVisible, isRowPerPageVisible, rowPerPageProps, manualPageNumberProps, }: PaginationProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Pagination;

package/dist/components/Pagination/PaginationButtons.d.ts

@@ -1,2 +1,37 @@
 import { PaginationButtonsProps } from './types';
+/**
+ * PaginationButtons - Container component for page number buttons
+ *
+ * Internal component used by Pagination to render numbered page buttons.
+ * Displays a range of page numbers with ellipsis breaks for large page counts.
+ * Handles page selection and visual state (selected/disabled).
+ *
+ * @category Components
+ * @subcategory Navigation
+ *
+ * @example
+ * ```tsx
+ * // Used internally by Pagination component
+ * <PaginationButtons
+ *   range={[1, 2, 3, -1, 10]}  // -1 represents ellipsis break
+ *   selectedPage={2}
+ *   onClick={(page) => setPage(page)}
+ *   isDisabled={false}
+ * />
+ * ```
+ *
+ * @see {@link Pagination} - Parent component that uses this component
+ * @see {@link PaginationButtonsProps} - Props interface
+ * @see {@link PageButton} - Internal component for individual buttons
+ *
+ * @internal
+ * This component is not exported from the main index and is intended for
+ * internal use within the Pagination component.
+ *
+ * @accessibility
+ * - ARIA labels and current state via PageButton components
+ * - Keyboard navigation support via Button components
+ * - Screen reader friendly
+ * - Proper focus management
+ */
 export declare const PaginationButtons: ({ range, selectedPage, onClick, isDisabled, }: PaginationButtonsProps) => false | import("@emotion/react/jsx-runtime").JSX.Element[];

package/dist/components/Pagination/PaginationContext.d.ts

@@ -1,4 +1,34 @@
 import { PaginationContextProps, PaginationContextProviderProps } from './types';
+/**
+ * Pagination context
+ * Provides page state and navigation functions to child components
+ */
 export declare const PaginationContext: import("react").Context<PaginationContextProps>;
+/**
+ * Hook to access pagination context
+ * Must be used within PaginationContextProvider
+ *
+ * @returns Pagination context value with page state and navigation functions
+ * @throws Error if used outside PaginationContextProvider
+ */
 export declare const usePaginationContext: () => PaginationContextProps;
+/**
+ * PaginationContextProvider - Context provider for pagination state
+ *
+ * Provides pagination state (current page, items per page) and navigation
+ * functions to child components. Required wrapper for Pagination component.
+ *
+ * @category Components
+ * @subcategory Navigation
+ *
+ * @example
+ * ```tsx
+ * <PaginationContextProvider selectedPage={1} defaultPerPage={25}>
+ *   <Pagination pagesCount={10} />
+ * </PaginationContextProvider>
+ * ```
+ *
+ * @see {@link Pagination} - Child component that uses this context
+ * @see {@link usePaginationContext} - Hook to access context values
+ */
 export declare const PaginationContextProvider: ({ selectedPage, defaultPerPage, children, }: PaginationContextProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Pagination/WithPagination.d.ts

@@ -1,4 +1,47 @@
-export declare const WithPagination: <T extends object>(Component: React.ComponentType<T>) => {
-    (props: T): import("@emotion/react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+import React from 'react';
+/**
+ * WithPagination - Higher-order component that wraps a component with PaginationContextProvider
+ *
+ * A higher-order component (HOC) that automatically wraps a component with
+ * PaginationContextProvider, providing pagination context to all child components.
+ * Useful for simplifying pagination setup when you want to provide context
+ * at a component level.
+ *
+ * @category Components
+ * @subcategory Navigation
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ *   return <div>Content with pagination</div>;
+ * };
+ *
+ * export const MyPaginationComponent = WithPagination(MyComponent);
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Used in page components
+ * const BotsPageComponent = () => {
+ *   return (
+ *     <div>
+ *       <BotsTable />
+ *       <Pagination pagesCount={10} />
+ *     </div>
+ *   );
+ * };
+ *
+ * export const BotsPage = WithPagination(BotsPageComponent);
+ * ```
+ *
+ * @see {@link PaginationContextProvider} - Context provider used internally
+ * @see {@link Pagination} - Component that uses the pagination context
+ *
+ * @note The HOC always initializes with selectedPage={1}
+ * @note Prop types may not work correctly with emotion due to known issue
+ *
+ * @template T - Props type of the wrapped component
+ * @param Component - Component to wrap with PaginationContextProvider
+ * @returns Wrapped component with pagination context
+ */
+export declare const WithPagination: <T extends object>(Component: React.ComponentType<T>) => React.ComponentType<T>;

package/dist/components/Pagination/components/RowsPerPageDropdown/RowsPerPageDropdown.d.ts

@@ -1,2 +1,43 @@
 import { RowsPerPageDropdownProps } from './types';
+/**
+ * RowsPerPageDropdown - Dropdown component for selecting rows per page
+ *
+ * A dropdown component that allows users to select the number of rows
+ * displayed per page in paginated data. Used within Pagination component
+ * when isRowPerPageVisible is true. Requires PaginationContextProvider
+ * to access and update the perPage state.
+ *
+ * @category Components
+ * @subcategory Navigation
+ *
+ * @example
+ * ```tsx
+ * <PaginationContextProvider selectedPage={1} defaultPerPage={25}>
+ *   <Pagination
+ *     pagesCount={20}
+ *     isRowPerPageVisible={true}
+ *     rowPerPageProps={{
+ *       selectedItem: 25,
+ *       rowsPerPageText: "Items per page",
+ *       rowsPerPageList: [
+ *         { id: 1, value: 10 },
+ *         { id: 2, value: 25 },
+ *         { id: 3, value: 50 },
+ *       ],
+ *     }}
+ *   />
+ * </PaginationContextProvider>
+ * ```
+ *
+ * @see {@link Pagination} - Parent component that uses this component
+ * @see {@link PaginationContextProvider} - Required context provider
+ * @see {@link Dropdown} - Base dropdown component used internally
+ *
+ * @requires PaginationContextProvider - Must be used within PaginationContextProvider
+ *
+ * @accessibility
+ * - ARIA attributes via Dropdown component
+ * - Keyboard navigation support
+ * - Screen reader friendly
+ */
 export declare const RowsPerPageDropdown: ({ selectedItem, rowsPerPageList, rowsPerPageText, ...rest }: RowsPerPageDropdownProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Pagination/components/RowsPerPageDropdown/types.d.ts

@@ -1,7 +1,46 @@
 import { CommonProps } from '../../../../types/emotion';
+/**
+ * Props for the RowsPerPageDropdown component
+ *
+ * A dropdown component that allows users to select the number of rows
+ * displayed per page in paginated data. Used within Pagination component
+ * to control items per page. Requires PaginationContextProvider.
+ *
+ * @example
+ * ```tsx
+ * <PaginationContextProvider selectedPage={1} defaultPerPage={25}>
+ *   <Pagination
+ *     pagesCount={20}
+ *     isRowPerPageVisible={true}
+ *     rowPerPageProps={{
+ *       selectedItem: 25,
+ *       rowsPerPageText: "Items per page",
+ *       rowsPerPageList: [
+ *         { id: 1, value: 10 },
+ *         { id: 2, value: 25 },
+ *         { id: 3, value: 50 },
+ *       ],
+ *     }}
+ *   />
+ * </PaginationContextProvider>
+ * ```
+ */
 export interface RowsPerPageDropdownProps extends CommonProps {
+    /**
+     * Currently selected number of rows per page
+     * Must match a value in rowsPerPageList
+     */
     selectedItem?: number;
+    /**
+     * Label text displayed before the dropdown
+     * @default 'Rows per page'
+     */
     rowsPerPageText?: string;
+    /**
+     * Array of available rows per page options
+     * Each item must have id and value properties
+     * @default [{ id: 1, value: 10 }, { id: 2, value: 25 }, { id: 3, value: 50 }, { id: 4, value: 100 }]
+     */
     rowsPerPageList?: Array<{
         id: number;
         value: number;

package/dist/components/Pagination/styles.d.ts

@@ -6,6 +6,6 @@ export declare const PaginationNav: import("@emotion/styled").StyledComponent<{
     theme?: Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const PageNumberInput: import("@emotion/styled").StyledComponent<import("../Input/types").InputProps & import("react").RefAttributes<HTMLInputElement> & {
+export declare const PageNumberInput: import("@emotion/styled").StyledComponent<import("..").InputProps & import("react").RefAttributes<HTMLInputElement> & {
     theme?: Theme;
 }, {}, {}>;