sy-ui-lib 1.0.0

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

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+import { IconName } from '../Icon/Icon.types';
+/** Props associated with Input Field component*/
+export interface InputFieldProps {
+    /** The label text displayed above the input field. */
+    label: string;
+    /** The HTML `id` attribute for the input, useful for accessibility and linking labels. */
+    id?: string;
+    /** The name of the input (used when submitting form data). */
+    name?: string;
+    /** The type of input (e.g., `text`, `email`, `password`). Defaults to `text`. */
+    type?: "text" | "email" | "number" | "password";
+    /** Text displayed inside the input when it's empty. */
+    placeholder?: string;
+    /** If input field is required then pass 'true' otherwise 'false' */
+    isRequired?: boolean;
+    /** Shows an error state with red border and error message when `true`. */
+    hasError?: boolean;
+    /** The message displayed when there's an error and `hasError` is `true`. */
+    errorMessage?: string;
+    /** Disables the input field when `true`. */
+    isDisabled?: boolean;
+    /** The current value of the input. */
+    value?: string;
+    /** Optional custom CSS classes to style the input. */
+    className?: string;
+    /** Handler function called when the input value changes. */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Set an icon at the end of input field */
+    iconName?: IconName;
+    /** Handler function on icon onclick event. */
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+}

package/dist/components/InputField/index.d.ts

@@ -0,0 +1,3 @@
+import { default as InputField } from './InputField.component';
+export { InputField };
+export type * from './InputField.types';

package/dist/components/Loader/Loader.component.d.ts

@@ -0,0 +1,18 @@
+import { LoaderProps } from './Loader.types';
+/**
+ * Loader component
+ *
+ * A fullscreen loading indicator with:
+ * - Optional title text
+ * - Optional countdown timer
+ * - Optional completion callback
+ *
+ * @param {string} [title = "loading"] - Default loading message display below the spinner.
+ * @param {number}  [duration] - Optional countdown duration in seconds.
+ * @param {Function}[onComplete] - Optional callback after countdown finishes.
+ *
+ * Example usage:
+ * <Loader title="Fetching data..." duration={5} onComplete={() => console.log("Done!")) />
+ */
+declare const Loader: React.FC<LoaderProps>;
+export default Loader;

package/dist/components/Loader/Loader.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react-vite/*';
+import { default as Loader } from './Loader.component';
+declare const meta: Meta<typeof Loader>;
+export default meta;
+/** Type alias for a story object of loader*/
+type Story = StoryObj<typeof Loader>;
+/** Default loader without title prop.*/
+export declare const Default: Story;
+/** Default loader without title prop.*/
+export declare const WithTitle: Story;
+/** Default loader without title prop.*/
+export declare const WithTimer: Story;
+/** Loader with custom title message.*/
+export declare const WithOnComplete: Story;

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

@@ -0,0 +1,8 @@
+export interface LoaderProps {
+    /** Optional loading message display below the spinner.*/
+    title?: string;
+    /** Optional countdown duration in seconds.*/
+    duration?: number;
+    /** Optional callback after countdown finishes.*/
+    onComplete?: () => void;
+}

package/dist/components/Loader/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Loader } from './Loader.component';
+export { Loader };
+export * from './Loader.types';

package/dist/components/MaintenancePage/MaintenancePage.component.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+import { MaintenancePageProps } from './MaintenancePage.types';
+/**
+ * MaintenancePage component
+ *
+ * Displays a full-page view indicating that the site is currently under maintenance.
+ * By default, it renders an SVG image (`UnderMaintenanceSvg`). You can override this by passing:
+ * - A custom image URL via `image.src`, or
+ * - A custom React component via `image.component` (e.g., your own SVG).
+ *
+ * The title and description can also be customized. Text size adapts based on screen size.
+ *
+ * @param {Object} [image] - Optional image shown above the title.
+ * @param {string} [image.src] - Path or URL of a custom image.
+ * @param {React.ComponentType<React.SVGProps<SVGSVGElement>>} [image.component] - A React component (e.g. SVG) to render instead of the default image.
+ * @param {string} [title] - Main heading text. Defaults to "🚧 Site Under Maintenance".
+ * @param {string} [description] - Supporting message text. Defaults to a scheduled update message.
+ *
+ * @example
+ * Default usage (renders UnderMaintenanceSvg)
+ * <MaintenancePage />
+ *
+ * @example
+ * Use a custom image by URL
+ * <MaintenancePage
+ *   image={{ src: "/custom-maintenance.svg", alt: "Custom maintenance image" }}
+ * />
+ *
+ * @example
+ * Use a custom SVG component
+ * import MySvg from "./MySvg";
+ * <MaintenancePage
+ *   image={{ component: <MySvg className="w-full h-auto" /> }}
+ * />
+ */
+declare const MaintenancePage: React.FC<MaintenancePageProps>;
+export default MaintenancePage;

package/dist/components/MaintenancePage/MaintenancePage.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite/*';
+import { default as MaintenancePage } from './MaintenancePage.component';
+declare const meta: Meta<typeof MaintenancePage>;
+export default meta;
+/** Type alias for a story object of MaintenancePage*/
+type Story = StoryObj<typeof MaintenancePage>;
+/** Default maintenance message with fallback image and text.*/
+export declare const Default: Story;
+/** Custom title and description.*/
+export declare const Customize: Story;

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

@@ -0,0 +1,14 @@
+/** Props for the MaintenancePage component.*/
+export interface MaintenancePageProps {
+    /** Optional image to show at the top of the page */
+    image?: {
+        /** Source path or URL of the image */
+        src: string;
+        /** A React component (e.g. SVG) to render instead of the default image.*/
+        component?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    };
+    /** Optional title displayed below the image */
+    title?: string;
+    /** Optional description text shown under the title */
+    description?: string;
+}

package/dist/components/MaintenancePage/index.d.ts

@@ -0,0 +1,3 @@
+import { default as MaintenancePage } from './MaintenancePage.component';
+export { MaintenancePage };
+export * from './MaintenancePage.types';

package/dist/components/Menu/Menu.component.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { MenuProps } from './Menu.types';
+/**
+ * Menu component
+ *
+ * Displays a vertical list of menu items with an optional last item that can include an icon.
+ *
+ * @param {MenuItemProps[]} items - Array of menu items to render.
+ * @param {LastItemsProps} [lastItem] - Optional last item with text, icon, and click handler.
+ *
+ * Example usage:
+ * <Menu
+ *   items={[
+ *     { text: "Profile", onClick: () => {} },
+ *     { text: "Settings", onClick: () => {} },
+ *   ]}
+ *   lastItem={{ text: "Logout", iconName: "logout", onClick: () => console.log("Logout clicked") }}
+ * />
+ */
+declare const Menu: React.FC<MenuProps>;
+export default Menu;

package/dist/components/Menu/Menu.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as Menu } from './Menu.component';
+declare const meta: Meta<typeof Menu>;
+export default meta;
+type Story = StoryObj<typeof Menu>;
+export declare const Default: Story;
+export declare const WithoutLastItem: Story;

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

@@ -0,0 +1,24 @@
+import { IconName } from '../Icon';
+/**  Props for each individual menu item*/
+export interface MenuItemProps {
+    /** Text label to display in the menu item*/
+    text: string;
+    /** Function called when this menu item is clicked*/
+    onClick: () => void;
+}
+/** Props for the "last item" in the menu (like a logout button)*/
+export interface LastItemsProps {
+    /** Optional text label for the last item*/
+    text?: string;
+    /** Optional icon name to show alongside the text*/
+    iconName?: IconName;
+    /** Function called when last item is clicked*/
+    onClick: () => void;
+}
+/** Props for the Menu component itself*/
+export interface MenuProps {
+    /** Array of regular menu items to display*/
+    items: MenuItemProps[];
+    /** Optional last item (e.g., logout) at the bottom of the menu*/
+    lastItem?: LastItemsProps;
+}

package/dist/components/Menu/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Menu } from './Menu.component';
+export { Menu };
+export * from './Menu.types';

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

@@ -0,0 +1,39 @@
+import { ModalProps } from './Modal.types';
+/**
+ * Modal component to display overlay content with a header, body, and optional footer actions.
+ *
+ * @component
+ * @param {boolean} isOpen Controls visibility of the modal.
+ * @param {string} title Title displayed in the modal header.
+ * @param {() => void} onClose Callback to close the modal.
+ * @param {React.ReactNode} children Body content of the modal.
+ * @param {FooterCTAProps[]} [footerCTA] Optional array of footer buttons with their configurations.
+ * @param {boolean} enableBackdropClick Optional prop to close the modal when clicking outside the modal area.
+ * @param {boolean} showCancelIcon Optional prop to show header or not.
+ *
+ * @returns {JSX.Element | null} The rendered Modal component or null if not open.
+ *
+ * @example
+ * <Modal
+ *   isOpen={isOpen}
+ *   title="Confirm Action"
+ *   onClose={handleClose}
+ *   footerCTA={[
+ *     {
+ *       text: "Cancel",
+ *       variant: "ghost",
+ *       onClick: handleOnClose,
+ *     },
+ *     {
+ *       text: "Create",
+ *       variant: "primary",
+ *       onClick: handleSave,
+ *       type: "submit",
+ *     },
+ *   ]}
+ * >
+ *   <p>Are you sure you want to perform this action?</p>
+ * </Modal>
+ */
+declare const Modal: React.FC<ModalProps>;
+export default Modal;

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

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ModalProps } from './Modal.types';
+/**
+ * Storybook metadata configuration for Modal component.
+ * Includes title, component reference, and control settings.
+ */
+declare const meta: Meta<ModalProps>;
+export default meta;
+type Story = StoryObj<ModalProps>;
+export declare const DefaultModal: Story;
+export declare const BankingModal: Story;

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

@@ -0,0 +1,20 @@
+import { ButtonProps } from '..';
+/** Allowed button HTML types */
+export type ButtonTypes = "button" | "submit" | "reset";
+/** Props associated with Modal component */
+export interface ModalProps {
+    /** Controls modal visibility */
+    isOpen: boolean;
+    /** Modal title text displayed in the header */
+    title: string;
+    /** Function to run when closing the modal */
+    onClose: () => void;
+    /** Content to render inside the modal body */
+    children: React.ReactNode;
+    /** Optional list of footer call-to-action buttons. */
+    footerCTA?: ButtonProps[];
+    /** Optional prop to close the modal when clicking outside the modal area.*/
+    enableBackdropClick?: boolean;
+    /** Optional prop to show cancel icon in header or not. */
+    showCancelIcon?: boolean;
+}

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

@@ -0,0 +1,3 @@
+import { default as Modal } from './Modal.component';
+export { Modal };
+export type * from './Modal.types';

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.component.d.ts

@@ -0,0 +1,22 @@
+import { MultiSelectDropdownProps } from './MultiSelectDropdown.types';
+/**
+ * MultiSelectDropdown Component
+ *
+ * Allows multiple selection from a dropdown using checkboxes.
+ *
+ * @param {string} label - Placeholder label when no items selected
+ * @param {"sm" | "lg" | "full"} [size="sm"] - Dropdown size. Use `"sm"` for compact, `"lg"` for larger, and `"full"` for full width.
+ * @param {MultiSelectOptionValues[]} options - List of selectable items
+ * @param {MultiSelectOptionValues[]} selected - Currently selected items
+ * @param {(selected: MultiSelectOptionValues[]) => void} onSelect - Selection change handler
+ *
+ * @example
+ * <MultiSelectDropdown
+ *   label="Choose tags"
+ *   options={[{ label: "React", value: "react" }]}
+ *   selected={[{ label: "React", value: "react" }]}
+ *   onSelect={(items) => console.log(items)}
+ * />
+ */
+declare const MultiSelectDropdown: ({ label, size, options, selected, onSelect, }: MultiSelectDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export default MultiSelectDropdown;

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as MultiSelectDropdown } from './MultiSelectDropdown.component';
+declare const meta: Meta<typeof MultiSelectDropdown>;
+export default meta;
+/** Type alias for a story object of Multiselect Dropdown.*/
+type Story = StoryObj<typeof MultiSelectDropdown>;
+/** Default story for the MultiSelectDropdown component.*/
+export declare const Default: Story;
+/** Story example to showing a default selected value.*/
+export declare const Selected: Story;

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

@@ -0,0 +1,22 @@
+export interface MultiSelectOptionValues {
+    /** The visible label shown in the dropdown list and selected state */
+    label: string;
+    /** The underlying value associated with the option */
+    value: string;
+}
+/** Props associated with Dropdown component*/
+export interface MultiSelectDropdownProps {
+    /** The fallback label to display when no option is selected. */
+    label: string;
+    /** Defines the size of the dropdown button and options. default value is "sm" */
+    size?: "sm" | "lg" | "full";
+    /** List of dropdown options available for selection. */
+    options: MultiSelectOptionValues[];
+    /** Currently selected option. Must be one of the items from `options`. */
+    selected: MultiSelectOptionValues[];
+    /**
+     * Callback function that is triggered when a new option is selected.
+     * @param selected - The updated list of selected option objects.
+     */
+    onSelect: (selected: MultiSelectOptionValues[]) => void;
+}

package/dist/components/MultiSelectDropdown/index.d.ts

@@ -0,0 +1,3 @@
+import { default as MultiSelectDropdown } from './MultiSelectDropdown.component';
+export { MultiSelectDropdown };
+export type * from './MultiSelectDropdown.types';

package/dist/components/NotFoundPage/NotFoundPage.component.d.ts

@@ -0,0 +1,48 @@
+import { default as React } from 'react';
+import { NotFoundPageProps } from './NotFoundPage.types';
+/**
+ * NotFoundPage Component
+ *
+ * A reusable 404 error page component.
+ *
+ * By default, it renders an SVG illustration (`NotFoundSvg`) to indicate the page is not found.
+ * You can override this with:
+ * - A custom image URL via `image.src`, or
+ * - A custom React component via `image.component` (e.g., an inline SVG).
+ *
+ * You can also pass an optional button with custom props below the image.
+ *
+ * @param {Object} [image] - Optional image shown on the 404 page.
+ * @param {string} [image.src] - Path or URL of a custom image.
+ * @param {React.ComponentType<React.SVGProps<SVGSVGElement>>} [image.component] - A React component (e.g. SVG) to render instead of the default image.
+ * @param {ButtonProps} [buttonProps] - Optional props to render a button below the image.
+ *
+ * @example
+ * Default usage (renders NotFoundSvg)
+ * <NotFoundPage />
+ *
+ * @example
+ * Use a custom image via src
+ * <NotFoundPage
+ *   image={{ src: "/images/404_custom.svg", alt: "Page not found" }}
+ * />
+ *
+ * @example
+ * Use a custom component (e.g. inline SVG)
+ * import Custom404Svg from "./Custom404Svg";
+ * <NotFoundPage
+ *   image={{ component: <Custom404Svg className="w-full h-auto" /> }}
+ * />
+ *
+ * @example
+ * With a button
+ * <NotFoundPage
+ *   buttonProps={{
+ *     text: "Go Home",
+ *     variant: "primary",
+ *     onClick: () => navigate("/"),
+ *   }}
+ * />
+ */
+declare const NotFoundPage: React.FC<NotFoundPageProps>;
+export default NotFoundPage;

package/dist/components/NotFoundPage/NotFoundPage.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react-vite/*';
+import { default as NotFoundPage } from './NotFoundPage.component';
+/** Storybook configuration for NotFoundPage component.*/
+declare const meta: Meta<typeof NotFoundPage>;
+export default meta;
+/** Type alias for a NotFoundPage story*/
+type Story = StoryObj<typeof NotFoundPage>;
+/** Default view with placeholder image and no button */
+export declare const Default: Story;
+/** 404 Page with a custom button */
+export declare const WithButton: Story;

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

@@ -0,0 +1,13 @@
+import { ButtonProps } from '..';
+/** Props for the NotFoundPage component.*/
+export interface NotFoundPageProps {
+    /** Optional image to show on the 404 page.*/
+    image?: {
+        /** Path or URL of a custom image.*/
+        src?: string;
+        /** A custom React component (e.g. SVG) to replace the default image. */
+        component?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    };
+    /**  Optional props for the button below the image.*/
+    buttonProps?: ButtonProps;
+}

package/dist/components/NotFoundPage/index.d.ts

@@ -0,0 +1,3 @@
+import { default as NotFoundPage } from './NotFoundPage.component';
+export { NotFoundPage };
+export * from './NotFoundPage.types';

package/dist/components/NotificationBanner/NotificationBanner.component.d.ts

@@ -0,0 +1,39 @@
+import { NotificationBannerProps } from './NotificationBanner.types';
+/**
+ * **NotificationBanner Component**
+ *
+ * A horizontally scrolling banner that continuously displays a list of upcoming
+ * events, announcements, or notifications. The content moves from right to left
+ * in a marquee-like style and pauses when hovered over.
+ *
+ * @component
+ * @example
+ * <NotificationBanner
+ *   data={[
+ *     {
+ *       title: "Upcoming",
+ *       iconName: "calendar",
+ *       events: [
+ *         { timeLabel: "July 05 - July 06", description: "TAMIL NADU PREMIER LEAGUE 2025" },
+ *         { timeLabel: "Tomorrow 12:50 PM", description: "IND vs AUS Match" },
+ *       ],
+ *     },
+ *      {
+ *       title: "Under Maintenance",
+ *       iconName: "calendar",
+ *       events: [
+ *         { timeLabel: "July 05 - July 06", description: "TAMIL NADU PREMIER LEAGUE 2025" },
+ *       ],
+ *     },
+ *   ]}
+ *   scrollSpeed={120}
+ *   defaultTitle="No upcoming events. Stay tuned!"
+ * />
+ * @param {NotificationBannerItem[]} data Array of notification items to display.
+ * @param {number} scrollSpeed Scroll speed in pixels per second. Defaults to 100.
+ * @param {string} defaultTitle Fallback text when no data is available. Defaults to "No upcoming events. Stay tuned!".
+ *
+ * @returns {JSX.Element} The rendered notification banner component.
+ */
+declare const NotificationBanner: React.FC<NotificationBannerProps>;
+export default NotificationBanner;

package/dist/components/NotificationBanner/NotificationBanner.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as NotificationBanner } from './NotificationBanner.component';
+declare const meta: Meta<typeof NotificationBanner>;
+export default meta;
+type Story = StoryObj<typeof NotificationBanner>;
+export declare const BasicNotificationBanner: Story;

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

@@ -0,0 +1,44 @@
+import { IconName } from '../Icon';
+export interface NotificationBannerItemEvent {
+    /**
+     * The text content of the notification.
+     */
+    description: string;
+    /**
+     * The date of the notification.
+     * Can be a string or Date object depending on usage.
+     */
+    timeLabel: string;
+}
+export interface NotificationBannerItem {
+    /**
+     * Custom title to display at the start of the banner.
+     * Overrides the defaultTitle if provided.
+     */
+    title?: string;
+    /**
+     * Optional icon to render alongside the banner title.
+     * Uses the `IconName` type from the Icon component.
+     */
+    iconName?: IconName;
+    /**
+     * Array of notification items that will be displayed in the banner.
+     * These items will scroll if scrolling is enabled.
+     */
+    events: NotificationBannerItemEvent[];
+}
+export interface NotificationBannerProps {
+    /**
+     * Array of notification items that will be displayed in the banner.
+     * These items will scroll if scrolling is enabled.
+     */
+    data: NotificationBannerItem[];
+    /**
+     * Speed of the scrolling animation in pixels per second.
+     */
+    scrollSpeed?: number;
+    /**
+     * Fallback title to use when no custom title is provided.
+     */
+    defaultTitle?: string;
+}

package/dist/components/NotificationBanner/index.d.ts

@@ -0,0 +1,3 @@
+import { default as NotificationBanner } from './NotificationBanner.component';
+export { NotificationBanner };
+export type * from './NotificationBanner.types';

package/dist/components/NullState/NullState.component.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { NullStateProps } from './NullState.types';
+/**
+ * NullState Component:
+ *
+ * A reusable UI component for displaying an empty or placeholder state.
+ * with an image, optional title, description, and button.
+ * @param {string} [image.src] - URL for the null state image.
+ * @param {React.ComponentType<React.SVGProps<SVGSVGElement>>} [image.component] - A React component (e.g. SVG) to render instead of the default image.
+ * @param {string} [title] - Optional heading to show in the null state.
+ * @param {string} [description] - Optional description text.
+ * @param {Object} [buttonProps] - Optional button to prompt user action.
+ *
+ * <NullState
+ *   src="/images/null_state_admin.png"
+ *   title="No Data Found"
+ *   description="There’s nothing to show right now. Please add new items to get started."
+ *   buttonProps={{
+ *     text: "Add Master",
+ *     iconName: "addUser",
+ *   }}
+ * />
+ */
+declare const NullState: React.FC<NullStateProps>;
+export default NullState;

package/dist/components/NullState/NullState.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as NullState } from './NullState.component';
+declare const meta: Meta<typeof NullState>;
+export default meta;
+/** Type alias for a story object for null state */
+type Story = StoryObj<typeof NullState>;
+/**
+ * Admin Null State - Shows default admin illustration and full content.
+ */
+export declare const Default: Story;
+/**
+ * User Null State - Uses image with minimal content.
+ */
+export declare const UserNull: Story;

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

@@ -0,0 +1,22 @@
+import { IconName } from '../Icon/Icon.types';
+export interface NullStateProps {
+    /** Optional image URL to show. If not provided, a default image will be shown.*/
+    image?: {
+        /** Source path or URL of the image (used if `component` is not provided). */
+        src?: string;
+        /** A custom React component (e.g. SVG) to replace the default image. */
+        component?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    };
+    title?: string;
+    /** Optional descriptive text providing more context about the null state.*/
+    description?: string;
+    /** Here it is a CTA that can lead to change the state from null to something different.*/
+    buttonProps?: {
+        /** Text to display on the CTA button. */
+        text: string;
+        /** Optional icon to accompany the CTA button text. */
+        iconName?: IconName;
+        /** Optional click handler for the CTA button*/
+        onClick?: () => void;
+    };
+}

package/dist/components/NullState/index.d.ts

@@ -0,0 +1,3 @@
+import { default as NullState } from './NullState.component';
+export { NullState };
+export type * from './NullState.types';

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

@@ -0,0 +1,23 @@
+import { PaginationProps } from './Pagination.types';
+/**
+ * Pagination component for navigating through paged content.
+ *
+ * Displays:
+ * - A list of page numbers (condensed with ellipsis when totalPages is large)
+ * - Navigation arrows (previous/next)
+ *
+ * @param {PaginationProps} props
+ * @param {number} props.currentPage - The currently active page (1-based index)
+ * @param {number} props.totalPages - The total number of pages
+ * @param {(page: number) => void} props.onPageChange - Callback invoked when a new page is selected
+ * @param {number} visiblePages - Number of visible page buttons around the current, default value is "5".
+ * @returns {JSX.Element} A responsive pagination control with page numbers and arrows
+ *
+ * <Pagination
+ *   currentPage={3}
+ *   totalPages={10}
+ *   onPageChange={(page) => setPage(page)}
+ * />
+ */
+declare const Pagination: React.FC<PaginationProps>;
+export default Pagination;

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { PaginationProps } from './Pagination.types';
+declare const meta: Meta<PaginationProps>;
+export default meta;
+type Story = StoryObj<PaginationProps>;
+export declare const Default: Story;
+export declare const CustomVisiblePages: Story;