@cleen/ui 0.1.0

package/src/components/notification/constant/notification.ts

@@ -0,0 +1,30 @@
+import { type ToastOptions as NotificationOptions } from 'react-toastify';
+import type { NotificationVariant } from '../Notification';
+/**
+ * Configuration object that maps notification variants to their specific settings.
+ * Each variant can have its own auto-close duration and styling tweaks.
+ */
+export const NOTIFICATION_VARIANT_CONFIG: Record<
+  NotificationVariant,
+  NotificationOptions
+> = {
+  success: {},
+  error: {
+    autoClose: 20000, // errors stick around a bit longer,
+    hideProgressBar: true,
+    closeOnClick: true,
+    pauseOnHover: true,
+  },
+  info: {},
+  warning: {
+    autoClose: 4000, // warnings get a bit more time
+  },
+  default: {
+    autoClose: 3000,
+    position: 'top-right',
+    hideProgressBar: false,
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+  },
+};

package/src/components/notification/index.ts

@@ -0,0 +1,2 @@
+export { showNotification, type NotificationProps } from './Notification';
+export { CleenNotificationContainer } from './wrappers/CleenNotificationContainer';

package/src/components/notification/wrappers/CleenNotificationContainer.tsx

@@ -0,0 +1,9 @@
+import { ToastContainer, type ToastContainerProps } from 'react-toastify';
+
+export const CleenNotificationContainer = (props: ToastContainerProps) => {
+  return (
+    <div className="cleen">
+      <ToastContainer {...props} />
+    </div>
+  );
+};

package/src/components/pagination/Pagination.tsx

@@ -0,0 +1,294 @@
+import { IconChevronLeft, IconChevronRight } from '@/components/cleenIcon';
+import {
+  PaginationGoToPage,
+  type PaginationGoToPageProps,
+} from '@/components/pagination/blocks/PaginationGoToPage';
+import {
+  PaginationPageSize,
+  type PaginationPageSizeProps,
+} from '@/components/pagination/blocks/PaginationPageSize';
+import {
+  DEFAULT_PAGINATION_LABELS,
+  type PaginationLabels,
+} from '@/components/pagination/constants/labels';
+import { Tooltip } from '@/components/tooltip';
+import {
+  cn,
+  type ComponentClassnames,
+  type ComponentStyles,
+} from '@cleen/ui-core';
+import {
+  forwardRef,
+  useCallback,
+  useMemo,
+  useRef,
+  type ComponentProps,
+  type CSSProperties,
+  type JSX,
+} from 'react';
+
+export interface PaginationProps extends ComponentProps<'div'> {
+  totalPages: number;
+  currentPage: number;
+  pageSize?: number;
+  pageSizes?: number[];
+  hasPageSizeSelector?: boolean;
+  hasGotoPage?: boolean;
+  onPageChange?: (page: number) => void;
+  onPageSizeChange?: (size: number) => void;
+  labels?: PaginationLabels;
+  classNames?: {
+    container?: string;
+    buttonsContainer?: string;
+    pageButton?: string;
+    activePageButton?: string;
+    navButton?: string;
+    ellipsis?: string;
+    pageSizeSelector?: ComponentClassnames<PaginationPageSizeProps>;
+    goToPage?: ComponentClassnames<PaginationGoToPageProps>;
+  };
+  styles?: {
+    container?: CSSProperties;
+    pageButton?: CSSProperties;
+    buttonsContainer?: CSSProperties;
+    activePageButton?: CSSProperties;
+    navButton?: CSSProperties;
+    ellipsis?: CSSProperties;
+    pageSizeSelector?: ComponentStyles<PaginationPageSizeProps>;
+    goToPage?: ComponentStyles<PaginationGoToPageProps>;
+  };
+}
+
+/**
+ * Pagination controls for navigating multi-page data sets.
+ *
+ * - Controlled via `currentPage` and `totalPages`; fire `onPageChange` to update externally.
+ * - Optional `pageSize` selector shown when `hasPageSizeSelector` is true; available sizes via `pageSizes`.
+ * - Optional "go to page" input shown when `hasGotoPage` is true.
+ * - Localise all button labels through the `labels` prop.
+ * - Accepts `classNames` and `styles` for keys: `container`, `buttonsContainer`, `pageButton`, `activePageButton`, `navButton`, `ellipsis`, `pageSizeSelector`, `goToPage`.
+ */
+export const Pagination = forwardRef<HTMLDivElement, PaginationProps>(
+  (
+    {
+      currentPage,
+      totalPages,
+      pageSize,
+      pageSizes,
+      hasGotoPage = true,
+      hasPageSizeSelector = true,
+      onPageChange,
+      onPageSizeChange,
+      labels = DEFAULT_PAGINATION_LABELS,
+      classNames,
+      styles,
+      ...props
+    },
+    ref
+  ) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const handleNextPage = useCallback(() => {
+      if (currentPage < totalPages) {
+        onPageChange?.(currentPage + 1);
+      }
+    }, [currentPage, totalPages, onPageChange]);
+
+    const handlePreviousPage = useCallback(() => {
+      if (currentPage > 1) {
+        onPageChange?.(currentPage - 1);
+      }
+    }, [currentPage, onPageChange]);
+
+    // Helper to render a page number button
+    const renderPageButton = useCallback(
+      (page: number) => (
+        <span
+          key={`page-${page}`}
+          className={cn(
+            'cleen-flex cleen-justify-center cleen-items-center hover:cleen-bg-gray/5 cleen-p-2 cleen-rounded-lg cleen-w-10 cleen-h-10 cleen-font-medium cleen-text-gray/70 cleen-text-sm cleen-cursor-pointer',
+            page === currentPage && 'cleen-bg-gray/5',
+            classNames?.pageButton,
+            page === currentPage ? classNames?.activePageButton : ''
+          )}
+          style={{
+            ...styles?.pageButton,
+            ...(page === currentPage ? styles?.activePageButton : {}),
+          }}
+          onClick={() => onPageChange?.(page)}
+        >
+          {page}
+        </span>
+      ),
+      [currentPage, onPageChange, classNames, styles]
+    );
+
+    // Helper to render clickable ellipsis
+    const renderEllipsis = useCallback(
+      (key: string) => (
+        <span
+          key={key}
+          className={cn(
+            'cleen-flex cleen-justify-center cleen-self-end hover:cleen-bg-gray/5 cleen-p-2 cleen-rounded-lg cleen-w-10 cleen-h-10 cleen-font-medium cleen-text-gray/70 cleen-text-sm cleen-transition-colors cleen-cursor-pointer',
+            classNames?.ellipsis
+          )}
+          style={styles?.ellipsis}
+          onClick={() => inputRef.current?.focus()}
+        >
+          ...
+        </span>
+      ),
+      [classNames, styles]
+    );
+
+    const pageNumbers = useMemo(() => {
+      if (isNaN(currentPage) || isNaN(totalPages)) {
+        return [];
+      }
+
+      const _elems: JSX.Element[] = [];
+
+      // Navigation button - Previous
+      _elems.push(
+        <Tooltip
+          key="prev"
+          label={labels.goToPreviousPage}
+          classNames={{ labelContainer: 'cleen-min-w-max' }}
+        >
+          <span
+            className={cn(
+              'cleen-flex cleen-justify-center cleen-items-center cleen-p-2 cleen-rounded-lg cleen-w-10 cleen-h-10 cleen-font-medium cleen-text-gray/70 hover:cleen-text-primary cleen-text-sm cleen-transition-colors cleen-cursor-pointer',
+              classNames?.navButton
+            )}
+            style={styles?.navButton}
+            onClick={handlePreviousPage}
+          >
+            <IconChevronLeft />
+          </span>
+        </Tooltip>
+      );
+
+      // Main pagination logic - show at most 5 page numbers
+      if (totalPages <= 7) {
+        // Show all pages if 7 or fewer
+        for (let i = 1; i <= totalPages; i++) {
+          _elems.push(renderPageButton(i));
+        }
+      } else {
+        // Always show first page
+        _elems.push(renderPageButton(1));
+
+        if (currentPage <= 3) {
+          // Near the beginning: 1, 2, 3, 4, ..., last
+          for (let i = 2; i < 5; i++) {
+            _elems.push(renderPageButton(i));
+          }
+          _elems.push(renderEllipsis('dots-end'));
+          _elems.push(renderPageButton(totalPages));
+        } else if (currentPage >= totalPages - 2) {
+          // Near the end: 1, ..., n-4, n-3, n-2, n-1, n
+          _elems.push(renderEllipsis('dots-start'));
+          for (let i = totalPages - 3; i <= totalPages; i++) {
+            _elems.push(renderPageButton(i));
+          }
+        } else {
+          // In the middle: 1, ..., current-1, current, current+1, ..., last
+          _elems.push(renderEllipsis('dots-start'));
+          _elems.push(renderPageButton(currentPage - 1));
+          _elems.push(renderPageButton(currentPage));
+          _elems.push(renderPageButton(currentPage + 1));
+          _elems.push(renderEllipsis('dots-end'));
+          _elems.push(renderPageButton(totalPages));
+        }
+      }
+
+      // Navigation button - Next
+      _elems.push(
+        <Tooltip
+          key="next"
+          label={labels.goToNextPage}
+          classNames={{ labelContainer: 'cleen-min-w-max' }}
+        >
+          <span
+            className={cn(
+              'cleen-flex cleen-justify-center cleen-items-center cleen-p-2 cleen-rounded-lg cleen-w-10 cleen-h-10 cleen-font-medium cleen-text-gray/70 hover:cleen-text-primary cleen-text-sm cleen-transition-colors cleen-cursor-pointer',
+              classNames?.navButton
+            )}
+            style={styles?.navButton}
+            onClick={handleNextPage}
+          >
+            <IconChevronRight />
+          </span>
+        </Tooltip>
+      );
+
+      return _elems;
+    }, [
+      currentPage,
+      totalPages,
+      labels,
+      classNames,
+      styles,
+      renderEllipsis,
+      renderPageButton,
+      handleNextPage,
+      handlePreviousPage,
+    ]);
+
+    return (
+      <div className="cleen" ref={ref} {...props}>
+        <div
+          className={cn(
+            'cleen-flex cleen-justify-between cleen-gap-4',
+            classNames?.container
+          )}
+          style={styles?.container}
+        >
+          {hasPageSizeSelector ? (
+            <PaginationPageSize
+              pageSize={pageSize}
+              labels={labels}
+              onPageSizeChange={onPageSizeChange}
+              pageSizes={pageSizes}
+              className={cn(
+                'cleen-flex-1',
+                classNames?.pageSizeSelector?.className
+              )}
+              classNames={classNames?.pageSizeSelector?.classNames}
+              {...styles?.pageSizeSelector}
+            />
+          ) : (
+            <div className="cleen-flex-1" />
+          )}
+
+          <div
+            className={cn(
+              'cleen-flex cleen-flex-1 cleen-justify-center cleen-items-center cleen-gap-2 cleen-w-full',
+              classNames?.buttonsContainer
+            )}
+            style={styles?.buttonsContainer}
+          >
+            {pageNumbers}
+          </div>
+
+          {hasGotoPage ? (
+            <PaginationGoToPage
+              ref={inputRef}
+              totalPages={totalPages}
+              onGoToPage={onPageChange}
+              labels={labels}
+              className={cn(
+                'cleen-flex cleen-flex-1 cleen-justify-end',
+                classNames?.goToPage?.className
+              )}
+              classNames={classNames?.goToPage?.classNames}
+              {...styles?.goToPage}
+            />
+          ) : (
+            <div className="cleen-flex-1" />
+          )}
+        </div>
+      </div>
+    );
+  }
+);

package/src/components/pagination/blocks/PaginationGoToPage.tsx

@@ -0,0 +1,91 @@
+import { Input } from '@/components/input';
+import type { InputProps } from '@/components/input/Input';
+import {
+  cn,
+  type ComponentClassnames,
+  type ComponentStyles,
+} from '@cleen/ui-core';
+import {
+  forwardRef,
+  useState,
+  type ComponentProps,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
+
+export interface PaginationGoToPageProps extends ComponentProps<'div'> {
+  totalPages: number;
+  onGoToPage?: (page: number) => void;
+  labels?: {
+    goToPage?: ReactNode;
+  };
+  classNames?: {
+    container?: string;
+    label?: string;
+    input?: ComponentClassnames<InputProps>;
+  };
+  styles?: {
+    container?: CSSProperties;
+    label?: CSSProperties;
+    input?: ComponentStyles<InputProps>;
+  };
+}
+
+export const PaginationGoToPage = forwardRef<
+  HTMLInputElement,
+  PaginationGoToPageProps
+>(({ totalPages, labels, onGoToPage, classNames, styles, ...props }, ref) => {
+  const [goToPageValue, setGoToPageValue] = useState('');
+
+  const handleGoToPage = () => {
+    const pageNum = parseInt(goToPageValue, 10);
+
+    if (!isNaN(pageNum) && pageNum >= 1 && pageNum <= totalPages) {
+      onGoToPage?.(pageNum);
+
+      setGoToPageValue('');
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleGoToPage();
+    } else if (e.key === 'Escape') {
+      setGoToPageValue('');
+    }
+  };
+
+  return (
+    <div className="cleen" {...props}>
+      <div
+        className={cn(
+          'cleen-flex cleen-items-center cleen-gap-2',
+          classNames?.container
+        )}
+        style={styles?.container}
+      >
+        <span
+          className={cn(
+            'cleen-text-sm cleen-text-gray/70 cleen-whitespace-nowrap',
+            classNames?.label
+          )}
+          style={styles?.label}
+        >
+          {labels?.goToPage}
+        </span>
+
+        <Input
+          ref={ref}
+          type="number"
+          min={1}
+          max={totalPages}
+          value={goToPageValue}
+          onChange={e => setGoToPageValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          {...classNames?.input}
+          {...styles?.input}
+        />
+      </div>
+    </div>
+  );
+});

package/src/components/pagination/blocks/PaginationPageSize.tsx

@@ -0,0 +1,145 @@
+import { Tooltip } from '@/components/tooltip';
+import { cn, useOutsideClick, usePositionClose } from '@cleen/ui-core';
+import {
+  forwardRef,
+  useRef,
+  useState,
+  type ComponentProps,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+const DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+
+export interface PaginationPageSizeProps extends ComponentProps<'div'> {
+  pageSize?: number;
+  pageSizes?: number[];
+  labels?: {
+    itemsPerPage?: (size: number) => ReactNode;
+  };
+  onPageSizeChange?: (size: number) => void;
+  classNames?: {
+    container?: string;
+    trigger?: string;
+    menu?: string;
+    menuItem?: string;
+  };
+  styles?: {
+    container?: CSSProperties;
+    trigger?: CSSProperties;
+    menu?: CSSProperties;
+    menuItem?: CSSProperties;
+  };
+}
+
+export const PaginationPageSize = forwardRef<
+  HTMLDivElement,
+  PaginationPageSizeProps
+>(
+  (
+    {
+      pageSize,
+      pageSizes = DEFAULT_PAGE_SIZE_OPTIONS,
+      labels,
+      onPageSizeChange,
+      classNames,
+      styles,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalPageSize, setInternalPageSize] = useState(
+      pageSize ?? pageSizes?.[0] ?? undefined
+    );
+    const [isOpen, setIsOpen] = useState(false);
+
+    const triggerRef = useRef<HTMLDivElement>(null);
+    const selectorRef = useRef<HTMLDivElement>(null);
+
+    const { positionStyles, isMounted } = usePositionClose({
+      triggerRef,
+      targetRef: selectorRef,
+      isOpen: isOpen,
+      position: 'top-left',
+    });
+
+    useOutsideClick({
+      refs: [triggerRef, selectorRef],
+      handler: () => setIsOpen(false),
+      enabled: isOpen,
+    });
+
+    return (
+      <div className="cleen" ref={ref} {...props}>
+        <div
+          className={cn(
+            'cleen-relative cleen-flex cleen-justify-start cleen-items-center cleTen-w-10',
+            classNames?.container
+          )}
+          style={styles?.container}
+        >
+          <Tooltip
+            label={labels?.itemsPerPage?.(internalPageSize)}
+            classNames={{ labelContainer: 'cleen-min-w-max' }}
+          >
+            <div
+              className={cn(
+                'cleen-flex cleen-justify-center cleen-items-center cleen-bg-gray/5 hover:cleen-bg-gray/10 cleen-p-2 cleen-rounded-lg cleen-min-w-10 cleen-h-10 cleen-font-medium cleen-text-[14px] cleen-text-gray/70 cleen-transition-colors cleen-cursor-pointer',
+                classNames?.trigger
+              )}
+              style={styles?.trigger}
+              onClick={() => setIsOpen(prev => !prev)}
+              ref={triggerRef}
+            >
+              {internalPageSize}
+            </div>
+          </Tooltip>
+
+          {isOpen &&
+            createPortal(
+              <div className="cleen">
+                <div
+                  ref={selectorRef}
+                  className={cn(
+                    'cleen-flex cleen-bg-background cleen-shadow-lg cleen-border cleen-border-gray/20 cleen-rounded-lg',
+                    'cleen-absolute cleen-z-50',
+                    {
+                      'cleen-opacity-0': !isMounted,
+                    },
+                    classNames?.menu
+                  )}
+                  style={{
+                    top: `${positionStyles.top}px`,
+                    left: `${positionStyles.left}px`,
+                    ...styles?.menu,
+                  }}
+                >
+                  {pageSizes
+                    ?.filter(option => option !== internalPageSize)
+                    ?.map(option => (
+                      <div
+                        key={option}
+                        className={cn(
+                          'cleen-flex cleen-justify-center cleen-items-center hover:cleen-bg-gray/5 cleen-p-2 cleen-rounded-lg cleen-min-w-10 cleen-h-10 cleen-font-medium cleen-text-gray/70 cleen-text-sm cleen-transition-colors cleen-cursor-pointer',
+                          classNames?.menuItem
+                        )}
+                        style={styles?.menuItem}
+                        onClick={() => {
+                          setInternalPageSize(option);
+                          onPageSizeChange?.(option);
+                          setIsOpen(false);
+                        }}
+                      >
+                        {option}
+                      </div>
+                    ))}
+                </div>
+              </div>,
+              document.body
+            )}
+        </div>
+      </div>
+    );
+  }
+);

package/src/components/pagination/constants/labels.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+
+export interface PaginationLabels {
+  goToPreviousPage?: ReactNode;
+  goToNextPage?: ReactNode;
+  goToPage?: ReactNode;
+  itemsPerPage?: (size: number) => ReactNode;
+}
+
+export const DEFAULT_PAGINATION_LABELS: PaginationLabels = {
+  goToPreviousPage: 'Go to previous page',
+  goToNextPage: 'Go to next page',
+  goToPage: 'Go to page',
+  itemsPerPage: (size: number) => `Show ${size} items per page`,
+};

package/src/components/pagination/index.ts

@@ -0,0 +1,9 @@
+export {
+  PaginationGoToPage,
+  type PaginationGoToPageProps,
+} from './blocks/PaginationGoToPage';
+export {
+  PaginationPageSize,
+  type PaginationPageSizeProps,
+} from './blocks/PaginationPageSize';
+export { Pagination, type PaginationProps } from './Pagination';