@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTOnboarding/index.js

@@ -1 +1,144 @@
-import React,{useState,useEffect,useMemo}from"react";import{Steps}from"intro.js-react";import"intro.js/introjs.css";import{array,bool,func,object,objectOf,string}from"prop-types";import{mergeClasses}from"../../utils/classesUtils";import WithTheme from"../WithTheme";import{TEST_IDS}from"../../constants/testIds";import OnboardingStep from"./components/OnboardingStep";import{retrieveStyle}from"./theme";import{DONE_LABEL,NEXT_LABEL,PREV_LABEL,START_LABEL}from"./constants";import styles from"./styles.module.scss";const{onboarding:onboarding}=TEST_IDS,UTOnboarding=_ref=>{var _steps$currentStep$is,_steps$currentStep,_steps$currentStep$hi,_steps$currentStep2,_steps$currentStep3,_steps$currentStep4;let{classNames:classNames,classes:themeClasses,closeButtonDataTestId:closeButtonDataTestId=onboarding.close,descriptionDataTestId:descriptionDataTestId=onboarding.description,enabled:enabled,handleComplete:handleComplete,handleOnClose:handleOnClose,nextButtonDataTestId:nextButtonDataTestId=onboarding.nextButton,options:options,prevButtonDataTestId:prevButtonDataTestId=onboarding.prevButton,steps:steps,titleDataTestId:titleDataTestId=onboarding.title,variant:variant}=_ref;const classes=useMemo(()=>mergeClasses(themeClasses,classNames),[themeClasses,classNames])||{},[currentStep,setCurrentStep]=useState(0),[loading,setLoading]=useState(!0),currentStepIsSuggestion=null!==(_steps$currentStep$is=null===(_steps$currentStep=steps[currentStep])||void 0===_steps$currentStep?void 0:_steps$currentStep.isSuggestion)&&void 0!==_steps$currentStep$is&&_steps$currentStep$is,hideFooter=null!==(_steps$currentStep$hi=null===(_steps$currentStep2=steps[currentStep])||void 0===_steps$currentStep2?void 0:_steps$currentStep2.hideFooter)&&void 0!==_steps$currentStep$hi&&_steps$currentStep$hi,totalSteps=steps.length;return setTimeout(()=>{var _nextButton$attribute,_prevButton$atrtibute,_skipButton$attribute,_stepTitle$attributes,_nextButton$setAttrib,_prevButton$setAttrib,_skipButton$setAttrib,_stepTitle$setAttribu;const nextButton=document.querySelector(".introjs-nextbutton"),prevButton=document.querySelector(".introjs-prevbutton"),skipButton=document.querySelector(".introjs-skipbutton"),stepTitle=document.querySelector(".introjs-tooltip-title");null!=nextButton&&null!==(_nextButton$attribute=nextButton.attributes)&&void 0!==_nextButton$attribute&&_nextButton$attribute["data-testid"]&&null!=prevButton&&null!==(_prevButton$atrtibute=prevButton.atrtibutes)&&void 0!==_prevButton$atrtibute&&_prevButton$atrtibute["data-testid"]&&null!=skipButton&&null!==(_skipButton$attribute=skipButton.attributes)&&void 0!==_skipButton$attribute&&_skipButton$attribute["data-testid"]&&null!=stepTitle&&null!==(_stepTitle$attributes=stepTitle.attributes)&&void 0!==_stepTitle$attributes&&_stepTitle$attributes["data-testid"]||(null==nextButton||null===(_nextButton$setAttrib=nextButton.setAttribute)||void 0===_nextButton$setAttrib||_nextButton$setAttrib.call(nextButton,"data-testid",nextButtonDataTestId),null==prevButton||null===(_prevButton$setAttrib=prevButton.setAttribute)||void 0===_prevButton$setAttrib||_prevButton$setAttrib.call(prevButton,"data-testid",prevButtonDataTestId),null==skipButton||null===(_skipButton$setAttrib=skipButton.setAttribute)||void 0===_skipButton$setAttrib||_skipButton$setAttrib.call(skipButton,"data-testid",closeButtonDataTestId),null==stepTitle||null===(_stepTitle$setAttribu=stepTitle.setAttribute)||void 0===_stepTitle$setAttribu||_stepTitle$setAttribu.call(stepTitle,"data-testid",titleDataTestId))},1),useEffect(()=>{setLoading(!1)},[steps]),useEffect(()=>{const referenceLayer=document.querySelector(".introjs-tooltipReferenceLayer");var _referenceLayer$class,_referenceLayer$class2;currentStepIsSuggestion?null==referenceLayer||null===(_referenceLayer$class=referenceLayer.classList)||void 0===_referenceLayer$class||_referenceLayer$class.add(styles.suggestionReference):null==referenceLayer||null===(_referenceLayer$class2=referenceLayer.classList)||void 0===_referenceLayer$class2||_referenceLayer$class2.remove(styles.suggestionReference);const footer=document.querySelector(".introjs-tooltipbuttons");var _footer$classList,_footer$classList2;hideFooter?null==footer||null===(_footer$classList=footer.classList)||void 0===_footer$classList||_footer$classList.add(styles.displayNone):null==footer||null===(_footer$classList2=footer.classList)||void 0===_footer$classList2||_footer$classList2.remove(styles.displayNone)}),loading?null:React.createElement(Steps,{enabled:enabled,steps:steps.map((step,index)=>({...step,intro:step.description?React.createElement(OnboardingStep,{buttonPreviousTitle:null==step?void 0:step.buttonPreviousTitle,classes:classes,currentStep:index,descriptionDataTestId:descriptionDataTestId,hideFooter:null==step?void 0:step.hideFooter,key:step,nextStep:null==step?void 0:step.nextStep,step:step,totalSteps:totalSteps,variant:variant}):step.intro})),initialStep:0,onExit:handleOnClose,onBeforeChange:nextStep=>{var _steps$nextStep;const overlay=document.querySelector(".introjs-overlay");var _overlay$classList,_overlay$classList2;(setCurrentStep(nextStep),null!==(_steps$nextStep=steps[nextStep])&&void 0!==_steps$nextStep&&_steps$nextStep.isSuggestion)?null==overlay||null===(_overlay$classList=overlay.classList)||void 0===_overlay$classList||_overlay$classList.add(styles.suggestionOverlay):null==overlay||null===(_overlay$classList2=overlay.classList)||void 0===_overlay$classList2||_overlay$classList2.remove(styles.suggestionOverlay)},onComplete:handleComplete||{},options:{buttonClass:"".concat(styles.button," ").concat(styles["".concat(variant,"Button")]||""," ").concat(classes.buttons),doneLabel:DONE_LABEL,exitOnEsc:!1,exitOnOverlayClick:!1,helperElementPadding:0,hidePrev:!0,nextLabel:0===currentStep?START_LABEL:NEXT_LABEL,prevLabel:PREV_LABEL,showBullets:!1,showProgress:!1,tooltipClass:"".concat(styles.tooltipContainer," ").concat(classes.onboardingContainer),highlightClass:null!==(_steps$currentStep3=steps[currentStep])&&void 0!==_steps$currentStep3&&_steps$currentStep3.isSuggestion?styles.suggestionHighlight:styles.highlight,...null!==(_steps$currentStep4=steps[currentStep])&&void 0!==_steps$currentStep4&&_steps$currentStep4.hideFooter?{hidePrev:!0,hideNext:!0,showProgress:!1,showButtons:!1}:null,...options}})};UTOnboarding.propTypes={classNames:objectOf(string),classes:objectOf(string),closeButtonDataTestId:string,descriptionDataTestId:string,enabled:bool,handleComplete:func,handleOnClose:func,nextButtonDataTestId:string,options:object,prevButtonDataTestId:string,steps:array,titleDataTestId:string,variant:string};export default WithTheme(retrieveStyle)(UTOnboarding);
+import React, { useState, useEffect, useMemo } from 'react';
+import { Steps } from 'intro.js-react';
+import 'intro.js/introjs.css';
+import { array, bool, func, object, objectOf, string } from 'prop-types';
+import { mergeClasses } from '../../utils/classesUtils';
+import WithTheme from '../WithTheme';
+import { TEST_IDS } from '../../constants/testIds';
+import OnboardingStep from './components/OnboardingStep';
+import { retrieveStyle } from './theme';
+import { DONE_LABEL, NEXT_LABEL, PREV_LABEL, START_LABEL } from './constants';
+import styles from './styles.module.scss';
+const {
+  onboarding
+} = TEST_IDS;
+const UTOnboarding = _ref => {
+  var _steps$currentStep$is, _steps$currentStep, _steps$currentStep$hi, _steps$currentStep2, _steps$currentStep3, _steps$currentStep4;
+  let {
+    classNames,
+    classes: themeClasses,
+    closeButtonDataTestId = onboarding.close,
+    descriptionDataTestId = onboarding.description,
+    enabled,
+    handleComplete,
+    handleOnClose,
+    nextButtonDataTestId = onboarding.nextButton,
+    options,
+    prevButtonDataTestId = onboarding.prevButton,
+    steps,
+    titleDataTestId = onboarding.title,
+    variant
+  } = _ref;
+  const classes = useMemo(() => mergeClasses(themeClasses, classNames), [themeClasses, classNames]) || {};
+  const [currentStep, setCurrentStep] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const currentStepIsSuggestion = (_steps$currentStep$is = (_steps$currentStep = steps[currentStep]) === null || _steps$currentStep === void 0 ? void 0 : _steps$currentStep.isSuggestion) !== null && _steps$currentStep$is !== void 0 ? _steps$currentStep$is : false;
+  const hideFooter = (_steps$currentStep$hi = (_steps$currentStep2 = steps[currentStep]) === null || _steps$currentStep2 === void 0 ? void 0 : _steps$currentStep2.hideFooter) !== null && _steps$currentStep$hi !== void 0 ? _steps$currentStep$hi : false;
+  const totalSteps = steps.length;
+
+  // This timeout is here only to get the querySelectors out of the call-stack order, giving the Step component time to render every child inside. This
+  // is necessary to find the html element searched by the selectors.
+  setTimeout(() => {
+    var _nextButton$attribute, _prevButton$atrtibute, _skipButton$attribute, _stepTitle$attributes, _nextButton$setAttrib, _prevButton$setAttrib, _skipButton$setAttrib, _stepTitle$setAttribu;
+    const nextButton = document.querySelector('.introjs-nextbutton');
+    const prevButton = document.querySelector('.introjs-prevbutton');
+    const skipButton = document.querySelector('.introjs-skipbutton');
+    const stepTitle = document.querySelector('.introjs-tooltip-title');
+    if (nextButton !== null && nextButton !== void 0 && (_nextButton$attribute = nextButton.attributes) !== null && _nextButton$attribute !== void 0 && _nextButton$attribute['data-testid'] && prevButton !== null && prevButton !== void 0 && (_prevButton$atrtibute = prevButton.atrtibutes) !== null && _prevButton$atrtibute !== void 0 && _prevButton$atrtibute['data-testid'] && skipButton !== null && skipButton !== void 0 && (_skipButton$attribute = skipButton.attributes) !== null && _skipButton$attribute !== void 0 && _skipButton$attribute['data-testid'] && stepTitle !== null && stepTitle !== void 0 && (_stepTitle$attributes = stepTitle.attributes) !== null && _stepTitle$attributes !== void 0 && _stepTitle$attributes['data-testid']) return;
+    nextButton === null || nextButton === void 0 || (_nextButton$setAttrib = nextButton.setAttribute) === null || _nextButton$setAttrib === void 0 || _nextButton$setAttrib.call(nextButton, 'data-testid', nextButtonDataTestId);
+    prevButton === null || prevButton === void 0 || (_prevButton$setAttrib = prevButton.setAttribute) === null || _prevButton$setAttrib === void 0 || _prevButton$setAttrib.call(prevButton, 'data-testid', prevButtonDataTestId);
+    skipButton === null || skipButton === void 0 || (_skipButton$setAttrib = skipButton.setAttribute) === null || _skipButton$setAttrib === void 0 || _skipButton$setAttrib.call(skipButton, 'data-testid', closeButtonDataTestId);
+    stepTitle === null || stepTitle === void 0 || (_stepTitle$setAttribu = stepTitle.setAttribute) === null || _stepTitle$setAttribu === void 0 || _stepTitle$setAttribu.call(stepTitle, 'data-testid', titleDataTestId);
+  }, 1);
+  useEffect(() => {
+    setLoading(false);
+  }, [steps]);
+  useEffect(() => {
+    const referenceLayer = document.querySelector('.introjs-tooltipReferenceLayer');
+    if (currentStepIsSuggestion) {
+      var _referenceLayer$class;
+      referenceLayer === null || referenceLayer === void 0 || (_referenceLayer$class = referenceLayer.classList) === null || _referenceLayer$class === void 0 || _referenceLayer$class.add(styles.suggestionReference);
+    } else {
+      var _referenceLayer$class2;
+      referenceLayer === null || referenceLayer === void 0 || (_referenceLayer$class2 = referenceLayer.classList) === null || _referenceLayer$class2 === void 0 || _referenceLayer$class2.remove(styles.suggestionReference);
+    }
+    const footer = document.querySelector('.introjs-tooltipbuttons');
+    if (hideFooter) {
+      var _footer$classList;
+      footer === null || footer === void 0 || (_footer$classList = footer.classList) === null || _footer$classList === void 0 || _footer$classList.add(styles.displayNone);
+    } else {
+      var _footer$classList2;
+      footer === null || footer === void 0 || (_footer$classList2 = footer.classList) === null || _footer$classList2 === void 0 || _footer$classList2.remove(styles.displayNone);
+    }
+  });
+  return loading ? null : /*#__PURE__*/React.createElement(Steps, {
+    enabled: enabled,
+    steps: steps.map((step, index) => ({
+      ...step,
+      intro: step.description ? /*#__PURE__*/React.createElement(OnboardingStep, {
+        buttonPreviousTitle: step === null || step === void 0 ? void 0 : step.buttonPreviousTitle,
+        classes: classes,
+        currentStep: index,
+        descriptionDataTestId: descriptionDataTestId,
+        hideFooter: step === null || step === void 0 ? void 0 : step.hideFooter,
+        key: step,
+        nextStep: step === null || step === void 0 ? void 0 : step.nextStep,
+        step: step,
+        totalSteps: totalSteps,
+        variant: variant
+      }) : step.intro
+    })),
+    initialStep: 0,
+    onExit: handleOnClose,
+    onBeforeChange: nextStep => {
+      var _steps$nextStep;
+      const overlay = document.querySelector('.introjs-overlay');
+      setCurrentStep(nextStep);
+      if ((_steps$nextStep = steps[nextStep]) !== null && _steps$nextStep !== void 0 && _steps$nextStep.isSuggestion) {
+        var _overlay$classList;
+        overlay === null || overlay === void 0 || (_overlay$classList = overlay.classList) === null || _overlay$classList === void 0 || _overlay$classList.add(styles.suggestionOverlay);
+      } else {
+        var _overlay$classList2;
+        overlay === null || overlay === void 0 || (_overlay$classList2 = overlay.classList) === null || _overlay$classList2 === void 0 || _overlay$classList2.remove(styles.suggestionOverlay);
+      }
+    },
+    onComplete: handleComplete || {},
+    options: {
+      buttonClass: "".concat(styles.button, " ").concat(styles["".concat(variant, "Button")] || '', " ").concat(classes.buttons),
+      doneLabel: DONE_LABEL,
+      exitOnEsc: false,
+      exitOnOverlayClick: false,
+      helperElementPadding: 0,
+      hidePrev: true,
+      nextLabel: currentStep === 0 ? START_LABEL : NEXT_LABEL,
+      prevLabel: PREV_LABEL,
+      showBullets: false,
+      showProgress: false,
+      tooltipClass: "".concat(styles.tooltipContainer, " ").concat(classes.onboardingContainer),
+      highlightClass: (_steps$currentStep3 = steps[currentStep]) !== null && _steps$currentStep3 !== void 0 && _steps$currentStep3.isSuggestion ? styles.suggestionHighlight : styles.highlight,
+      ...((_steps$currentStep4 = steps[currentStep]) !== null && _steps$currentStep4 !== void 0 && _steps$currentStep4.hideFooter ? {
+        hidePrev: true,
+        hideNext: true,
+        showProgress: false,
+        showButtons: false
+      } : null),
+      ...options
+    }
+  });
+};
+UTOnboarding.propTypes = {
+  classNames: objectOf(string),
+  classes: objectOf(string),
+  closeButtonDataTestId: string,
+  descriptionDataTestId: string,
+  enabled: bool,
+  handleComplete: func,
+  handleOnClose: func,
+  nextButtonDataTestId: string,
+  options: object,
+  prevButtonDataTestId: string,
+  steps: array,
+  titleDataTestId: string,
+  variant: string
+};
+export default WithTheme(retrieveStyle)(UTOnboarding);

package/dist/esm/components/UTOnboarding/theme.js

@@ -1 +1,111 @@
-import{DEFAULT_PROPS,VARIANTS}from"./constants";const getBackgroundColor=_ref=>{let{theme:theme,variant:variant}=_ref;return variant!==VARIANTS.light?theme.Palette[variant]["05"]:theme.Palette.light["01"]},getLabelTheme=_ref2=>{let{theme:theme,variant:variant}=_ref2;return{[VARIANTS.dark]:theme.Palette.light["01"],[VARIANTS.information]:theme.Palette.light["01"],[VARIANTS.light]:theme.Palette.dark["05"]}[variant]},getButtonTheme=_ref3=>{var _theme$Palette$action,_theme$Palette$action2,_theme$Palette$action3;let{theme:theme,variant:variant}=_ref3;return{[VARIANTS.dark]:(null===(_theme$Palette$action=theme.Palette.actions)||void 0===_theme$Palette$action?void 0:_theme$Palette$action.negative["04"])||theme.Palette.negative["04"],[VARIANTS.information]:(null===(_theme$Palette$action2=theme.Palette.actions)||void 0===_theme$Palette$action2?void 0:_theme$Palette$action2.negative["04"])||theme.Palette.negative["04"],[VARIANTS.light]:(null===(_theme$Palette$action3=theme.Palette.actions)||void 0===_theme$Palette$action3?void 0:_theme$Palette$action3.accent["04"])||theme.Palette.accent["04"]}[variant]},getButtonNextTextTheme=_ref4=>{var _theme$Palette$action4;let{theme:theme,variant:variant}=_ref4;return{[VARIANTS.dark]:theme.Palette.dark["05"],[VARIANTS.information]:theme.Palette.dark["05"],[VARIANTS.light]:(null===(_theme$Palette$action4=theme.Palette.actions)||void 0===_theme$Palette$action4?void 0:_theme$Palette$action4.negative["05"])||theme.Palette.negative["05"]}[variant]};export const validateProps=_ref5=>{let{variant:variant}=_ref5;return{variant:VARIANTS[variant]||VARIANTS[DEFAULT_PROPS.variant]}};export const retrieveStyle=_ref6=>{let{theme:theme,variant:variant}=_ref6;return{onboardingContainer:{backgroundColor:" ".concat(getBackgroundColor({theme:theme,...validateProps({variant:variant})})," !important"),color:getLabelTheme({theme:theme,...validateProps({variant:variant})}),"& .introjs-tooltip-title":{color:getLabelTheme({theme:theme,...validateProps({variant:variant})})},"& .introjs-skipbutton":{color:getLabelTheme({theme:theme,...validateProps({variant:variant})})},"& .introjs-nextbutton":{backgroundColor:"".concat(getButtonTheme({theme:theme,...validateProps({variant:variant})})," !important"),color:"".concat(getButtonNextTextTheme({theme:theme,...validateProps({variant:variant})})," !important")},"& .introjs-tooltip":{backgroundColor:" ".concat(getBackgroundColor({theme:theme,...validateProps({variant:variant})})," !important")}}}};
+import { DEFAULT_PROPS, VARIANTS } from './constants';
+const getBackgroundColor = _ref => {
+  let {
+    theme,
+    variant
+  } = _ref;
+  return variant !== VARIANTS.light ? theme.Palette[variant]['05'] : theme.Palette.light['01'];
+};
+const getLabelTheme = _ref2 => {
+  let {
+    theme,
+    variant
+  } = _ref2;
+  return {
+    [VARIANTS.dark]: theme.Palette.light['01'],
+    [VARIANTS.information]: theme.Palette.light['01'],
+    [VARIANTS.light]: theme.Palette.dark['05']
+  }[variant];
+};
+const getButtonTheme = _ref3 => {
+  var _theme$Palette$action, _theme$Palette$action2, _theme$Palette$action3;
+  let {
+    theme,
+    variant
+  } = _ref3;
+  return {
+    [VARIANTS.dark]: ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.negative['04']) || theme.Palette.negative['04'],
+    [VARIANTS.information]: ((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.negative['04']) || theme.Palette.negative['04'],
+    [VARIANTS.light]: ((_theme$Palette$action3 = theme.Palette.actions) === null || _theme$Palette$action3 === void 0 ? void 0 : _theme$Palette$action3.accent['04']) || theme.Palette.accent['04']
+  }[variant];
+};
+const getButtonNextTextTheme = _ref4 => {
+  var _theme$Palette$action4;
+  let {
+    theme,
+    variant
+  } = _ref4;
+  return {
+    [VARIANTS.dark]: theme.Palette.dark['05'],
+    [VARIANTS.information]: theme.Palette.dark['05'],
+    [VARIANTS.light]: ((_theme$Palette$action4 = theme.Palette.actions) === null || _theme$Palette$action4 === void 0 ? void 0 : _theme$Palette$action4.negative['05']) || theme.Palette.negative['05']
+  }[variant];
+};
+export const validateProps = _ref5 => {
+  let {
+    variant
+  } = _ref5;
+  return {
+    variant: VARIANTS[variant] || VARIANTS[DEFAULT_PROPS.variant]
+  };
+};
+export const retrieveStyle = _ref6 => {
+  let {
+    theme,
+    variant
+  } = _ref6;
+  return {
+    onboardingContainer: {
+      backgroundColor: " ".concat(getBackgroundColor({
+        theme,
+        ...validateProps({
+          variant
+        })
+      }), " !important"),
+      color: getLabelTheme({
+        theme,
+        ...validateProps({
+          variant
+        })
+      }),
+      '& .introjs-tooltip-title': {
+        color: getLabelTheme({
+          theme,
+          ...validateProps({
+            variant
+          })
+        })
+      },
+      '& .introjs-skipbutton': {
+        color: getLabelTheme({
+          theme,
+          ...validateProps({
+            variant
+          })
+        })
+      },
+      '& .introjs-nextbutton': {
+        backgroundColor: "".concat(getButtonTheme({
+          theme,
+          ...validateProps({
+            variant
+          })
+        }), " !important"),
+        color: "".concat(getButtonNextTextTheme({
+          theme,
+          ...validateProps({
+            variant
+          })
+        }), " !important")
+      },
+      '& .introjs-tooltip': {
+        backgroundColor: " ".concat(getBackgroundColor({
+          theme,
+          ...validateProps({
+            variant
+          })
+        }), " !important")
+      }
+    }
+  };
+};

package/dist/esm/components/UTPagination/README.md

@@ -0,0 +1,242 @@
+# UTPagination
+
+A comprehensive pagination component that provides both page navigation and page size selection functionality. The component consists of two main parts: a page size selector and pagination controls.
+
+## Features
+
+- **Page Size Selection**: Dropdown to select number of items per page
+- **Page Navigation**: Previous/next buttons with page numbers
+- **Responsive Design**: Adapts to different screen sizes
+- **Customizable Themes**: Support for different color themes
+- **Accessibility**: Proper ARIA labels and keyboard navigation
+- **Double Arrow Navigation**: Quick navigation to first/last page for large datasets
+- **Size Variants**: Support for different button sizes
+
+## Props
+
+| Prop                 | Type                             | Default   | Description                         |
+| -------------------- | -------------------------------- | --------- | ----------------------------------- |
+| `page`               | `number`                         | -         | Current page number (0-based)       |
+| `rowsPerPage`        | `number`                         | -         | Number of rows per page             |
+| `totalRows`          | `number`                         | -         | Total number of rows                |
+| `rowsPerPageOptions` | `number[]`                       | -         | Available options for rows per page |
+| `totalRowsLabel`     | `string`                         | -         | Label for total rows display        |
+| `onChangePage`       | `function`                       | -         | Callback when page changes          |
+| `onChangeRowPerPage` | `function`                       | -         | Callback when rows per page changes |
+| `isResponsive`       | `boolean`                        | -         | Enable responsive behavior          |
+| `colorThemes`        | `object`                         | `{}`      | Color themes for different elements |
+| `classes`            | `object`                         | -         | Custom CSS classes                  |
+| `size`               | `'small' \| 'medium' \| 'large'` | `'large'` | Size variant for navigation buttons |
+
+### Color Themes
+
+| Theme              | Type     | Description                         |
+| ------------------ | -------- | ----------------------------------- |
+| `pageButton`       | `string` | Color theme for page number buttons |
+| `navigationButton` | `string` | Color theme for navigation buttons  |
+| `totalRows`        | `string` | Color theme for total rows label    |
+
+### Classes
+
+| Class                     | Description                   |
+| ------------------------- | ----------------------------- |
+| `paginationContainer`     | Main container wrapper        |
+| `pagination`              | Pagination controls container |
+| `pageSizeSelectContainer` | Page size selector container  |
+| `pageSizeSelect`          | Page size select dropdown     |
+| `totalRowsLabel`          | Total rows label              |
+
+## Usage
+
+### Basic Usage
+
+```jsx
+import React, { useState } from 'react';
+import { UTPagination } from '@energy/ui';
+
+function MyComponent() {
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const totalRows = 150;
+  const rowsPerPageOptions = [10, 25, 50, 100];
+
+  const handlePageChange = newPage => {
+    setPage(newPage);
+  };
+
+  const handleRowsPerPageChange = newRowsPerPage => {
+    setRowsPerPage(newRowsPerPage);
+    setPage(0); // Reset to first page when changing page size
+  };
+
+  return (
+    <UTPagination
+      page={page}
+      rowsPerPage={rowsPerPage}
+      totalRows={totalRows}
+      rowsPerPageOptions={rowsPerPageOptions}
+      totalRowsLabel="items"
+      onChangePage={handlePageChange}
+      onChangeRowPerPage={handleRowsPerPageChange}
+    />
+  );
+}
+```
+
+### With Custom Themes
+
+```jsx
+<UTPagination
+  page={page}
+  rowsPerPage={rowsPerPage}
+  totalRows={totalRows}
+  rowsPerPageOptions={[10, 25, 50]}
+  totalRowsLabel="records"
+  onChangePage={handlePageChange}
+  onChangeRowPerPage={handleRowsPerPageChange}
+  colorThemes={{
+    pageButton: 'primary',
+    navigationButton: 'secondary',
+    totalRows: 'gray'
+  }}
+/>
+```
+
+### With Custom Size
+
+The `size` prop controls the size of navigation buttons (previous/next arrows and double arrows). Available values:
+
+- `'small'`: Compact button size
+- `'medium'`: Standard button size
+- `'large'`: Large button size (default)
+
+```jsx
+<UTPagination
+  page={page}
+  rowsPerPage={rowsPerPage}
+  totalRows={totalRows}
+  rowsPerPageOptions={[10, 25, 50]}
+  totalRowsLabel="items"
+  onChangePage={handlePageChange}
+  onChangeRowPerPage={handleRowsPerPageChange}
+  size="medium"
+/>
+```
+
+### Responsive Pagination
+
+```jsx
+<UTPagination
+  page={page}
+  rowsPerPage={rowsPerPage}
+  totalRows={totalRows}
+  rowsPerPageOptions={[10, 25, 50]}
+  totalRowsLabel="items"
+  onChangePage={handlePageChange}
+  onChangeRowPerPage={handleRowsPerPageChange}
+  isResponsive={true}
+/>
+```
+
+### With Custom Classes
+
+```jsx
+<UTPagination
+  page={page}
+  rowsPerPage={rowsPerPage}
+  totalRows={totalRows}
+  rowsPerPageOptions={[10, 25, 50]}
+  totalRowsLabel="items"
+  onChangePage={handlePageChange}
+  onChangeRowPerPage={handleRowsPerPageChange}
+  classes={{
+    paginationContainer: 'custom-pagination-wrapper',
+    pagination: 'custom-pagination-controls',
+    pageSizeSelectContainer: 'custom-select-container',
+    pageSizeSelect: 'custom-select',
+    totalRowsLabel: 'custom-total-label'
+  }}
+/>
+```
+
+## Component Structure
+
+The UTPagination component is composed of two main sub-components:
+
+### PageSizeSelector
+
+- Displays a dropdown to select the number of items per page
+- Shows total count with customizable label
+- Supports custom styling and themes
+- Uses UTSelect component with outlined variant
+
+### Pagination
+
+- Navigation buttons (previous/next)
+- Page number buttons with active state styling
+- Double arrow navigation for large datasets (first/last page)
+- Responsive behavior that hides double arrows on smaller screens
+- Support for different button sizes
+
+## Constants
+
+| Constant                         | Value  | Description                                   |
+| -------------------------------- | ------ | --------------------------------------------- |
+| `PREPOSITION`                    | `'de'` | Preposition used in total rows label          |
+| `PAGINATION_LIMIT_DOUBLE_ARROWS` | `10`   | Minimum pages to show double arrow navigation |
+| `MAX_PAGINATION_ITEMS`           | `5`    | Maximum page numbers to display               |
+
+## Theme Integration
+
+The component integrates with the Energy UI theme system and supports the following theme properties:
+
+```javascript
+{
+  UTPagination: {
+    paginationContainer: {
+      marginTop: 32
+    },
+    pageSizeSelect: {
+      background: 'transparent',
+      fontSize: '14px',
+      padding: 6,
+      textAlign: 'center',
+      border: '1px solid #ccc',
+      hover: {
+        border: '1px solid #999'
+      }
+    },
+    pagination: {
+      gridGap: '16px'
+    }
+  },
+  Fonts: {
+    fontFamily: 'your-font-family'
+  }
+}
+```
+
+## Accessibility
+
+- Proper ARIA labels for navigation buttons
+- Keyboard navigation support
+- Screen reader friendly page announcements
+- Focus management for interactive elements
+- Semantic HTML structure
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Dependencies
+
+- React 16.8+
+- PropTypes
+- Energy UI theme system
+- UTButton component
+- UTSelect component
+- UTLabel component
+- @tabler/icons-react (for navigation icons)

package/dist/esm/components/UTPagination/components/PageSizeSelector/index.js

@@ -1 +1,56 @@
-import React from"react";import{arrayOf,shape,string,number,func}from"prop-types";import UTSelect from"../../../UTSelect";import UTLabel from"../../../UTLabel";import{classesType}from"../../../../types/commonTypes";import{getPageSizeOptions}from"./utils";import styles from"./styles.module.scss";const PageSizeSelector=_ref=>{let{classes:classes,colorThemes:colorThemes,options:options,rowsPerPage:rowsPerPage,onChangeRowPerPage:onChangeRowPerPage,label:label,totalRows:totalRows}=_ref;return React.createElement("div",{className:styles.pageSizeSelector},React.createElement("div",{className:styles.selectorContainer},React.createElement(UTSelect,{options:getPageSizeOptions(options,totalRows),labelKey:"label",valueKey:"value",input:{onChange:onChangeRowPerPage,value:rowsPerPage},disableFirstOption:!0,variant:"outlined",selectProps:{className:"".concat(styles.pageSizeSelectContainer," ").concat(classes.pageSizeSelectContainer),classes:{select:classes.pageSizeSelect}}})),React.createElement(UTLabel,{className:"".concat(styles.label," ").concat(classes.totalRowsLabel),colorTheme:colorThemes.totalRows||"gray"},label))};PageSizeSelector.propTypes={classes:classesType,colorThemes:shape({pageButton:string,navigationButton:string,totalRows:string}),options:arrayOf(number),rowsPerPage:number,onChangeRowPerPage:func,label:string,totalRows:number};export default PageSizeSelector;
+import React from 'react';
+import { arrayOf, shape, string, number, func } from 'prop-types';
+import UTSelect from '../../../UTSelect';
+import UTLabel from '../../../UTLabel';
+import { classesType } from '../../../../types/commonTypes';
+import { getPageSizeOptions } from './utils';
+import styles from './styles.module.scss';
+const PageSizeSelector = _ref => {
+  let {
+    classes,
+    colorThemes,
+    options,
+    rowsPerPage,
+    onChangeRowPerPage,
+    label,
+    totalRows
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.pageSizeSelector
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.selectorContainer
+  }, /*#__PURE__*/React.createElement(UTSelect, {
+    options: getPageSizeOptions(options, totalRows),
+    labelKey: "label",
+    valueKey: "value",
+    input: {
+      onChange: onChangeRowPerPage,
+      value: rowsPerPage
+    },
+    disableFirstOption: true,
+    variant: "outlined",
+    selectProps: {
+      className: "".concat(styles.pageSizeSelectContainer, " ").concat(classes.pageSizeSelectContainer),
+      classes: {
+        select: classes.pageSizeSelect
+      }
+    }
+  })), /*#__PURE__*/React.createElement(UTLabel, {
+    className: "".concat(styles.label, " ").concat(classes.totalRowsLabel),
+    colorTheme: colorThemes.totalRows || 'gray'
+  }, label));
+};
+PageSizeSelector.propTypes = {
+  classes: classesType,
+  colorThemes: shape({
+    pageButton: string,
+    navigationButton: string,
+    totalRows: string
+  }),
+  options: arrayOf(number),
+  rowsPerPage: number,
+  onChangeRowPerPage: func,
+  label: string,
+  totalRows: number
+};
+export default PageSizeSelector;

package/dist/esm/components/UTPagination/components/PageSizeSelector/utils.js

@@ -1 +1,13 @@
-import{isEmpty}from"@widergy/web-utils/lib/array";const getPrevOption=(options,index)=>0===index?0:options[index-1];export const getPageSizeOptions=(originalOptions,totalRows)=>{const filteredOptions=originalOptions.filter((_,index)=>getPrevOption(originalOptions,index)<totalRows);return isEmpty(filteredOptions)?[{value:originalOptions[0],label:totalRows}]:filteredOptions.map(value=>({value:value,label:Math.min(value,totalRows)}))};
+import { isEmpty } from '@widergy/web-utils/lib/array';
+const getPrevOption = (options, index) => index === 0 ? 0 : options[index - 1];
+export const getPageSizeOptions = (originalOptions, totalRows) => {
+  const filteredOptions = originalOptions.filter((_, index) => getPrevOption(originalOptions, index) < totalRows);
+  if (isEmpty(filteredOptions)) return [{
+    value: originalOptions[0],
+    label: totalRows
+  }];
+  return filteredOptions.map(value => ({
+    value,
+    label: Math.min(value, totalRows)
+  }));
+};

package/dist/esm/components/UTPagination/components/Pagination/components/NavigationButton/index.js

@@ -1 +1,41 @@
-import React,{memo}from"react";import{bool,elementType,func,number,oneOfType,string}from"prop-types";import UTButton from"../../../../../UTButton";import styles from"./styles.module.scss";const NavigationButton=_ref=>{let{className:className,colorTheme:colorTheme,disabled:disabled,Icon:Icon,iconPlacement:iconPlacement,label:label,onClick:onClick,size:size}=_ref;return React.createElement(UTButton,{classNames:{root:"\n        ".concat(className,"\n        ").concat(styles.navigationButton,"\n      ")},colorTheme:colorTheme,disabled:disabled,Icon:Icon,iconPlacement:iconPlacement,onClick:onClick,size:size,variant:"semitransparent"},label&&React.createElement("span",{className:styles.label},label))};NavigationButton.propTypes={className:string,colorTheme:string,disabled:bool,Icon:elementType,iconPlacement:string,label:oneOfType([string,number]),onClick:func,size:string};export default memo(NavigationButton);
+import React, { memo } from 'react';
+import { bool, elementType, func, number, oneOfType, string } from 'prop-types';
+import UTButton from '../../../../../UTButton';
+import styles from './styles.module.scss';
+const NavigationButton = _ref => {
+  let {
+    className,
+    colorTheme,
+    disabled,
+    Icon,
+    iconPlacement,
+    label,
+    onClick,
+    size
+  } = _ref;
+  return /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      root: "\n        ".concat(className, "\n        ").concat(styles.navigationButton, "\n      ")
+    },
+    colorTheme: colorTheme,
+    disabled: disabled,
+    Icon: Icon,
+    iconPlacement: iconPlacement,
+    onClick: onClick,
+    size: size,
+    variant: "semitransparent"
+  }, label && /*#__PURE__*/React.createElement("span", {
+    className: styles.label
+  }, label));
+};
+NavigationButton.propTypes = {
+  className: string,
+  colorTheme: string,
+  disabled: bool,
+  Icon: elementType,
+  iconPlacement: string,
+  label: oneOfType([string, number]),
+  onClick: func,
+  size: string
+};
+export default /*#__PURE__*/memo(NavigationButton);