@cleen/ui 0.1.0 → 0.1.1

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

@@ -1,30 +0,0 @@
-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

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

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

@@ -1,9 +0,0 @@
-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

@@ -1,294 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,145 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

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