groovinads-ui 1.2.75 → 1.9.0

package/README.md

@@ -14,11 +14,9 @@
 The library includes the following components:
 
 - [Buttons](#buttons):
-
   - [Button](#button): For user actions.
 
 - [Dropdowns](#dropdowns):
-
   - [DropdownComponent](#dropdowncomponent): For dropdown menus.
   - [DropdownDatePicker](#dropdowndatepicker): For filter dropdowns.
   - [DropdownFilter](#dropdownfilter): For filter dropdowns.
@@ -26,7 +24,6 @@ The library includes the following components:
   - [DropdownSimpleDatePicker](#dropdownsimpledatepicker): For filter dropdowns.
 
 - [Inputs](#inputs):
-
   - [Checkbox](#checkbox): For multiple option selections.
   - [Input](#input): For user data entry.
   - [InputChip](#inputChip): For dynamically managing and displaying keywords.
@@ -36,35 +33,42 @@ The library includes the following components:
   - [Textarea](#textarea): For multiline text input.
 
 - [Labels](#labels):
-
   - [Alert](#alert): For displaying alerts.
+  - [EditableContent](#editablecontent): For inline editing of text content.
   - [Icon](#icon): For displaying icons.
   - [LoginSource](#loginsource): For show icons of login sources.
   - [PillComponent](#pillcomponent): For displaying information.
   - [Spinner](#spinner): For loading animations.
   - [StatusIcon](#statusicon): For displaying status icons.
 
-- [Navigation](#navigation):
+- [Modals](#modals):
+  - [ModalComponent](#modalcomponent): For displaying modals.
 
+- [Navigation](#navigation):
+  - [Aside](#aside): For displaying aside panels.
   - [Navbar](#navbar): For top navigation bars.
+  - [Pagination](#pagination): For pagination of tables.
   - [Sidebar](#sidebar): For side navigation bars.
   - [Stepper](#stepper): For step-by-step navigation.
   - [Tabnav](#tabnav): For tab navigation.
 
-- [Toast](#toasts):
+- [Tables](#tables):
+  - [TableSkeleton](#tableskeleton): For displaying table skeletons.
+
+- [Toasts](#toasts):
   - [ToastComponent](#toastcomponent): For displaying notifications.
   - [ToastProgress](#toastprogress): For displaying progress notifications.
 
 # Requirements
 
-- The component styles must be included from: `https://ui.groovinads.com/styles.min.css`.
-- **npm** (v18 or higher).
+- The component styles must be included from: `https://ui.groovinads.com/2.0.0/styles.min.css`.
+- **npm** (v20 or higher).
 - [Font Awesome](https://fontawesome.com/) icons must be included in the project.
 
 ## ⚠️ Important: Use of additional CSS libraries
 
 When utilizing external libraries that require additional CSS styles, it is important to ensure that these styles are not added directly to individual components.
-Instead, they should be included in the `index.html` file of your project. This ensures that all styles are loaded correctly and in the desired order. Specifically, make sure that the CSS file `https://ui.groovinads.com/styles.min.css` is the last one to be loaded to avoid style conflicts and ensure that the default Groovinads styles have the proper priority.
+Instead, they should be included in the `index.html` file of your project. This ensures that all styles are loaded correctly and in the desired order. Specifically, make sure that the CSS file `https://ui.groovinads.com/2.0.0/styles.min.css` is the last one to be loaded to avoid style conflicts and ensure that the default Groovinads styles have the proper priority.
 
 ```html
 <!-- Example of how to include additional CSS styles in index.html -->
@@ -72,7 +76,7 @@ Instead, they should be included in the `index.html` file of your project. This
 	<!-- Other CSS files -->
 	<link rel="stylesheet" href="https://example.com/external-library.css" />
 	<!-- Groovinads CSS file, ensure it is the last to be loaded -->
-	<link rel="stylesheet" href="https://ui.groovinads.com/styles.min.css" />
+	<link rel="stylesheet" href="https://ui.groovinads.com/2.0.0/styles.min.css" />
 </head>
 ```
 
@@ -99,11 +103,11 @@ import { Button } from 'groovinads-ui';
 <Button
 	variant={'outline'}
 	size={'xs'}
-	oonClick={() => {
+	onClick={() => {
 		console.log('Button clicked');
 	}}
-	icon={'plus'}
-	iconPosition={'end'}
+	startIcon={'plus'}
+	endIcon={'arrow-right'}
 	style={'warning'}
 	className={'mb-5'}
 	processing={true}
@@ -112,55 +116,90 @@ import { Button } from 'groovinads-ui';
 </Button>;
 ```
 
-| Property       | Type     | Required | Options                                       | Default   | Description                                                                                                                                                                                                           |
-| -------------- | -------- | -------- | --------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children`     | Node     | No       | n/a                                           | n/a       | If true, children will be displayed alongside the spinner with '...' added to indicate the processing status in the label. If false, only the spinner will be shown. It can include text, icons, or other components. |
-| `className`    | String   | No       | n/a                                           | n/a       | Additional CSS class names that can be applied to the button.                                                                                                                                                         |
-| `icon`         | String   | No       | n/a                                           | n/a       | Specifies the name of the icon to be displayed inside the button.                                                                                                                                                     |
-| `iconPosition` | String   | No       | `start` `end`                                 | `start`   | Position of the icon relative to the text inside the button. It's optional.                                                                                                                                           |
-| `onClick`      | Function | No       | n/a                                           | n/a       | Function to be executed when the button is clicked.                                                                                                                                                                   |
-| `processing`   | Boolean  | No       | `true` `false`                                | `false`   | If true, displays a loading animation (...) with a spinner. If false, it will not be displayed.                                                                                                                       |
-| `size`         | String   | No       | `xs` `md` `lg`                                | `md`      | Defines the size of the button. It's optional.                                                                                                                                                                        |
-| `style`        | String   | No       | `default` `success` `danger` `warning` `link` | `default` | Specifies the style variant of the button, which can change its color and visual appearance. It's optional.                                                                                                           |
-| `variant`      | String   | No       | `primary` `secondary` `terciary` `outline`    | `primary` | Defines the visual style of the button. It's optional.                                                                                                                                                                |
-| `disabled`     | Boolean  | No       | `true` `false`                                | `false`   | If true, disables the button. If false, the button is enabled.                                                                                                                                                        |
+| Property     				| Type     | Required | Options                                       | Default   | Description                                                                                                                                                                                                           |
+| ------------------------- | -------- | -------- | --------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children`     			| Node     | No       | n/a                                           | n/a       | If true, children will be displayed alongside the spinner with '…' added to indicate the processing status in the label. If false, only the spinner will be shown. It can include text, icons, or other components.   |
+| `className`    			| String   | No       | n/a                                           | n/a       | Additional CSS class names that can be applied to the button.                                                                                                                                                         |
+| `disabled`     			| Boolean  | No       | `true` `false`                                | `false`   | If true, disables the button. If false, the button is enabled.                                                                                                                                                        |
+| `endIcon`      			| String   | No       | n/a                                           | n/a       | Specifies the name of the icon to be displayed at the end of the button (after the text).                                                                                                                             |
+| `hideLabelOnMobile`     	| Boolean  | No       | `true` `false`                                | `false`   | If true, the text inside the button will not be displayed on mobile. If false, the text will be displayed on mobile.                                                                                                  |
+| `onClick`      			| Function | No       | n/a                                           | n/a       | Function to be executed when the button is clicked.                                                                                                                                                                   |
+| `processing`   			| Boolean  | No       | `true` `false`                                | `false`   | If true, displays a loading animation (…) with a spinner. If false, it will not be displayed.                                                                                                                         |
+| `size`         			| String   | No       | `xs` `md` `lg`                                | `md`      | Defines the size of the button. It's optional.                                                                                                                                                                        |
+| `startIcon`    			| String   | No       | n/a                                           | n/a       | Specifies the name of the icon to be displayed at the start of the button (before the text).                                                                                                                          |
+| `style`        			| String   | No       | `default` `success` `danger` `warning` `link` | `default` | Specifies the style variant of the button, which can change its color and visual appearance. It's optional.                                                                                                           |
+| `variant`      			| String   | No       | `primary` `secondary` `terciary` `outline`    | `primary` | Defines the visual style of the button. It's optional.                                                                                                                                                                |
 
 ## Dropdowns
 
+All dropdown components support a unified validation system:
+
+### Validation System
+
+All form dropdowns (DropdownComponent, DropdownFilter, DropdownMultiSelect, DropdownDatePicker, DropdownSimpleDatePicker) share a consistent validation approach:
+
+- **`showError`** (Boolean): Controls the visual error state. When `true`, applies the `not-validated` CSS class to the toggle.
+- **`requiredText`** (String): Custom error message displayed via the `data-error` attribute.
+- **External Control**: Validation state is managed by the parent component, providing full flexibility.
+- **Auto-clear**: Error messages can be configured to automatically disappear after 2 seconds (implemented in parent component).
+
+**Example validation pattern:**
+
+```jsx
+const [showError, setShowError] = useState(false);
+
+const handleValidate = () => {
+	if (!isValid) {
+		setShowError(true);
+		// Auto-hide after 2 seconds
+		setTimeout(() => setShowError(false), 2000);
+	} else {
+		setShowError(false);
+		// Validation passed
+	}
+};
+
+// In the dropdown component
+<DropdownComponent
+	showError={showError}
+	requiredText="Please select an option"
+	// ... other props
+/>
+```
+
+---
+
+
 ### DropdownComponent
 
 ```jsx
 import React, { useState } from 'react';
-import { DropdownComponent, Button, Icon } from 'groovinads-ui';
+import { DropdownComponent } from 'groovinads-ui';
 import { DropdownMenu, DropdownItem } from 'react-bootstrap';
 
 const DropdownComponentExample = () => {
 	const [show, setShow] = useState(false);
-
-	const handleToggle = () => {
-		setShow((prevShow) => !prevShow);
-	};
+	const [selected, setSelected] = useState('');
 
 	return (
 		<DropdownComponent
 			show={show}
 			setShow={setShow}
-			onToggle={handleToggle}
-			align='start'
+			autoClose={true}
+			label='Category'
+			selectedValue={selected}
+			variant='input'
+			fullWidth
 		>
-			<Button
-				variant='outline'
-				icon='plus'
-				className='dropdown-toggle'
-				onClick={handleToggle}
-			>
-				<span>Add filter</span>
-				<Icon iconName='chevron-down' className='ms-2' />
-			</Button>
-
 			<DropdownMenu>
-				<DropdownItem onClick={() => console.log('Item 1 clicked')}>
-					Item 1
+				<DropdownItem onClick={() => setSelected('Option 1')}>
+					Option 1
+				</DropdownItem>
+				<DropdownItem onClick={() => setSelected('Option 2')}>
+					Option 2
+				</DropdownItem>
+				<DropdownItem onClick={() => setSelected('Option 3')}>
+					Option 3
 				</DropdownItem>
 			</DropdownMenu>
 		</DropdownComponent>
@@ -170,37 +209,75 @@ const DropdownComponentExample = () => {
 export default DropdownComponentExample;
 ```
 
-##### Dropdown width submenu
+##### Dropdown with submenu
 
 ```jsx
-<DropdownComponent autoClose='outside' show={show} setShow={setShow}>
-	<Dropdown.Toggle onClick={() => handleToggle()}>Toggle</Dropdown.Toggle>
-	<Dropdown.Menu>
-		<Dropdown.Item>
-			<DropdownComponent autoClose='outside' drop='end'>
-				<Dropdown.Toggle as='div'>Submenu</Dropdown.Toggle>
-				<Dropdown.Menu>
-					<Dropdown.Item>Item 1</Dropdown.Item>
-					<Dropdown.Item>Item 2</Dropdown.Item>
-					<Dropdown.Item>Item 3</Dropdown.Item>
-				</Dropdown.Menu>
-			</DropdownComponent>
-		</Dropdown.Item>
-		<Dropdown.Item>Item 2</Dropdown.Item>
-		<Dropdown.Item>Item 3</Dropdown.Item>
-	</Dropdown.Menu>
-</DropdownComponent>
+import React, { useState } from 'react';
+import { DropdownComponent } from 'groovinads-ui';
+import { DropdownMenu, DropdownItem } from 'react-bootstrap';
+
+const NestedDropdownExample = () => {
+	const [showParent, setShowParent] = useState(false);
+	const [showChild, setShowChild] = useState(false);
+
+	return (
+		<DropdownComponent
+			show={showParent}
+			setShow={setShowParent}
+			autoClose='outside'
+			label='Parent Menu'
+			variant='primary'
+		>
+			<DropdownMenu>
+				<DropdownItem>
+					<DropdownComponent
+						show={showChild}
+						setShow={setShowChild}
+						autoClose={true}
+						label='Child Menu'
+						variant='primary'
+						isChild
+						drop='end'
+					>
+						<DropdownMenu>
+							<DropdownItem>Submenu Item 1</DropdownItem>
+							<DropdownItem>Submenu Item 2</DropdownItem>
+							<DropdownItem>Submenu Item 3</DropdownItem>
+						</DropdownMenu>
+					</DropdownComponent>
+				</DropdownItem>
+				<DropdownItem>Regular Item 1</DropdownItem>
+				<DropdownItem>Regular Item 2</DropdownItem>
+			</DropdownMenu>
+		</DropdownComponent>
+	);
+};
+
+export default NestedDropdownExample;
 ```
 
-| Property    | Type             | Required | Options                           | Default | Description                                                                                                                                                                                                     |
-| ----------- | ---------------- | -------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `align`     | String           | No       | `start` `end`                     | `start` | Determines the alignment of the dropdown menu relative to the toggle. If `start`, the dropdown menu will align with the start of the toggle. If `end`, the dropdown menu will align with the end of the toggle. |
-| `autoClose` | Boolean / String | No       | `true` `false` `outside` `inside` | false   | Determines when the dropdown should auto-close. If `true` or `inside`, it closes on inside click. If `outside`, it closes on the outside click.                                                                 |
-| `children`  | Node             | Yes      | n/a                               | n/a     | Child components to be rendered inside the dropdown.                                                                                                                                                            |
-| `className` | String           | No       | n/a                               | string  | Adds a custom CSS class to the component.names.                                                                                                                                                                 |
-| `drop`      | String           | No       | `up` `down` `start` `end`         | n/a     | Determines the direction in which the dropdown menu will be displayed.                                                                                                                                          |
-| `overflow`  | Boolean          | No       | `true` `false`                    | false   | Adjusts the dropdown's position to handle overflow situations.                                                                                                                                                  |
-| `show`      | Boolean          | No       | `true` `false`                    | n/a     | Controls the visibility of the dropdown. If true, the dropdown is visible; if false, it is hidden.                                                                                                              |
+| Property        | Type             | Required | Options                                                | Default   | Description                                                                                                                                                |
+| --------------- | ---------------- | -------- | ------------------------------------------------------ | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `align`         | String           | No       | `start` `end`                                          | `start`   | Determines the alignment of the dropdown menu relative to the toggle.                                                                                      |
+| `autoClose`     | Boolean / String | No       | `true` `false` `outside` `inside`                      | `false`   | Determines when the dropdown should auto-close. If `true` or `inside`, it closes on inside click. If `outside`, it closes on outside click.               |
+| `children`      | Node             | Yes      | n/a                                                    | n/a       | DropdownMenu component to be rendered inside the dropdown.                                                                                                 |
+| `className`     | String           | No       | n/a                                                    | `''`      | Adds a custom CSS class to the dropdown container.                                                                                                         |
+| `disabled`      | Boolean          | No       | `true` `false`                                         | `false`   | If `true`, disables the dropdown.                                                                                                                          |
+| `drop`          | String           | No       | `up` `down` `start` `end`                              | n/a       | Determines the direction in which the dropdown menu will be displayed. Caret icon adapts automatically.                                                    |
+| `fullWidth`     | Boolean          | No       | `true` `false`                                         | `false`   | If `true`, makes the dropdown menu match the toggle button width dynamically.                                                                              |
+| `icon`          | String           | No       | n/a                                                    | n/a       | FontAwesome icon name to display before the label in the toggle button.                                                                                    |
+| `isChild`       | Boolean          | No       | `true` `false`                                         | `false`   | If `true`, renders the toggle without button styles (useful for nested dropdowns).                                                                         |
+| `label`         | Node             | No       | n/a                                                    | n/a       | Label text for the dropdown toggle button.                                                                                                                 |
+| `onToggle`      | Function         | No       | n/a                                                    | n/a       | Callback function triggered when dropdown visibility changes.                                                                                              |
+| `overflow`      | Boolean          | No       | `true` `false`                                         | `false`   | Adjusts the dropdown's position to handle overflow situations with fixed positioning.                                                                      |
+| `requiredText`  | String           | No       | n/a                                                    | n/a       | Error message displayed when validation fails. Used with `showError` prop.                                                                                 |
+| `selectedValue` | Node             | No       | n/a                                                    | n/a       | Selected value to display (used with `variant='input'` to show the current selection).                                                                     |
+| `setShow`       | Function         | No       | n/a                                                    | n/a       | Function to update the visibility state of the dropdown.                                                                                                   |
+| `show`          | Boolean          | No       | `true` `false`                                         | n/a       | Controls the visibility of the dropdown. If true, the dropdown is visible; if false, it is hidden.                                                         |
+| `showError`     | Boolean          | No       | `true` `false`                                         | `false`   | If `true`, displays the dropdown in error state with `not-validated` class. Used for validation.                                                           |
+| `size`          | String           | No       | `xs` `md` `lg`                                         | `md`      | Size of the toggle button.                                                                                                                                 |
+| `style`         | String           | No       | `default` `success` `danger` `warning` `link`          | `default` | Style/color scheme of the toggle button.                                                                                                                   |
+| `variant`       | String           | No       | `primary` `secondary` `terciary` `outline` `input`     | `primary` | Variant of the toggle button. Use `input` for form-field style dropdowns with label and selected value display.                                            |
 
 ### DropdownDatePicker
 
@@ -252,18 +329,22 @@ export default DropdownDatePickerExample;
 | `className`      | String   | No       | n/a              | n/a      | Adds a custom CSS class to the component.                                                                                              |
 | `dateFrom`       | String   | No       | n/a              | `null`   | Start date.                                                                                                                            |
 | `dateTo`         | String   | No       | n/a              | `null`   | End date.                                                                                                                              |
+| `disabled`       | Boolean  | No       | `true` `false`   | `false`  | If `true`, disables the dropdown. If `false`, the dropdown is enabled.                                                                      |
 | `inputLabel`     | String   | No       | n/a              | `period` | Label to display on the dropdown toggle button.                                                                                        |
 | `locked`         | Boolean  | No       | `true` `false`   | `false`  | Determines if the dropdown is locked. If true, it is not interactive. If false, it is interactive.                                     |
-| `onToggle`       | Function | No       | n/a              | n/a      | Function that is called when the dropdown is toggled.                                                                                  |
+| `maxDate`        | Object   | No       | n/a              | n/a      | Max date filter.                                                                                                                       |
+| `minDate`        | Object   | No       | n/a              | n/a      | Min date filter.                                                                                                                       |
 | `onRemoveFilter` | Function | No       | n/a              | n/a      | Remove the filter when the remove filter button is clicked.                                                                            |
+| `onToggle`       | Function | No       | n/a              | n/a      | Function that is called when the dropdown is toggled.                                                                                  |
 | `overflow`       | Boolean  | No       | `true` `false`   | `false`  | Adjusts the dropdown's position to handle overflow situations.                                                                         |
+| `requiredText`   | String   | No       | n/a              | n/a      | Error message displayed when validation fails. Used with `showError` prop.                                                             |
+| `searchLabel`    | String   | No       | n/a              | `Search` | Label to display on the search input.                                                                                              	|
 | `setDateFrom`    | Function | No       | n/a              | n/a      | Allows updating the start date of the date range. Function to update the start date of the range to be selected.                       |
 | `setDateTo`      | Function | No       | n/a              | n/a      | Allows you to update the end date of the selection range.                                                                              |
 | `setShow`        | Function | No       | n/a              | n/a      | Function to update the visibility state of the dropdown.                                                                               |
 | `show`           | Boolean  | No       | `true` `false`   | `false`  | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden.                                   |
-| `variant`        | String   | No       | `input` `filter` | `input`  | Determines the type of dropdown. If 'input', it will be displayed as a button. If 'filter', it will be displayed as a filter dropdown. |
-| `minDate`        | Object   | No       | n/a              | n/a      | Min date filter.                                                                                                                       |
-| `maxDate`        | Object   | No       | n/a              | n/a      | Max date filter.                                                                                                                       |
+| `showError`      | Boolean  | No       | `true` `false`   | `false`  | If `true`, displays the dropdown in error state with `not-validated` class. Controlled externally for validation.                      |
+| `variant`        | String   | No       | `input` `filter` | `input`  | Determines the type of dropdown. If `input`, it will be displayed as a button. If `filter`, it will be displayed as a filter dropdown. |
 
 ### DropdownFilter
 
@@ -286,19 +367,24 @@ import { DropdownFilter } from 'groovinads-ui';
 />;
 ```
 
-| Property            | Type     | Required | Options              | Default  | Description                                           |
-| ------------------- | -------- | -------- | -------------------- | -------- | ----------------------------------------------------- |
-| `className`         | String   | No       | n/a                  | n/a      | Additional CSS class names.                           |
-| `locked`            | Boolean  | No       | `true` `false`       | `false`  | If true, the filter cannot be removed.                |
-| `menuType`          | String   | No       | `simple` `selection` | `simple` | Type of dropdown menu.                                |
-| `onRemoveFilter`    | Function | No       | n/a                  | n/a      | Function to handle filter removal.                    |
-| `onToggle`          | Function | No       | n/a                  | n/a      | Function to handle toggle state changes.              |
-| `overflow`          | Boolean  | No       | `true` `false`       | `false`  | Whether to enable overflow strategy for the dropdown. |
-| `setValuesSelected` | Function | No       | n/a                  | n/a      | Function to set the selected values.                  |
-| `show`              | Boolean  | No       | `true` `false`       | n/a      | Controls the visibility of the dropdown.              |
-| `title`             | String   | No       | n/a                  | n/a      | Title of the dropdown filter.                         |
-| `values`            | Array    | No       | n/a                  | [ ]      | Available values for selection.                       |
-| `valuesSelected`    | Array    | No       | n/a                  | [ ]      | Available values for selection.                       |
+| Property            | Type     | Required | Options              	  	 | Default 	| Description                                           	|
+| ------------------- | -------- | -------- | -------------------------- | -------- | --------------------------------------------------------- |
+| `autoClose`         | Boolean  | No       | `true` `false` `outside` 	 | `false`  | Controls when the dropdown menu closes. If `false`, the menu does not close on click. If `true`, it closes when clicking an item in the list or outside the menu. If outside, it closes when clicking outside the menu but not when clicking an item in the list. |
+| `className`         | String   | No       | n/a             		     | n/a      | Additional CSS class names.                           	|
+| `disabled`          | Boolean  | No       | `true` `false`       		 | `false`  | If `true`, disables the dropdown. If `false`, the dropdown is enabled. |
+| `locked`            | Boolean  | No       | `true` `false`       		 | `false`  | If true, the filter cannot be removed.                	|
+| `menuType`          | String   | No       | `simple` `selection` 		 | `simple` | Type of dropdown menu.                                	|
+| `onRemoveFilter`    | Function | No       | n/a                  		 | n/a      | Function to handle filter removal.                    	|
+| `onToggle`          | Function | No       | n/a                  		 | n/a      | Function to handle toggle state changes.             		|
+| `overflow`          | Boolean  | No       | `true` `false`       		 | `false`  | Whether to enable overflow strategy for the dropdown. 	|
+| `requiredText`      | String   | No       | n/a                  		 | n/a      | Error message displayed when validation fails. Used with `showError` prop. |
+| `setShow`           | Function | No       | n/a                  		 | n/a      | Function to update the visibility state of the dropdown. 	|
+| `setValuesSelected` | Function | No       | n/a                  		 | n/a      | Function to set the selected values.                  	|
+| `show`              | Boolean  | No       | `true` `false`       		 | n/a      | Controls the visibility of the dropdown.              	|
+| `showError`         | Boolean  | No       | `true` `false`       		 | `false`  | If `true`, displays the dropdown in error state with `not-validated` class. Controlled externally for validation. |
+| `title`             | String   | No       | n/a                  		 | n/a      | Title of the dropdown filter.                         	|
+| `values`            | Array    | No       | n/a                  		 | [ ]      | Available values for selection.                       	|
+| `valuesSelected`    | Array    | No       | n/a                  		 | [ ]      | Available values for selection.                       	|
 
 ### DropdownMultiSelect
 
@@ -313,11 +399,8 @@ const MultiSelectComponent = () => {
 	const [show, setShow] = useState(false);
 	const [show1, setShow1] = useState(false);
 
-	const [errorRequired, setErrorRequired] = useState(false);
-	const [errorRequired1, setErrorRequired1] = useState(false);
-
 	const handleToggle = () => setShow((prevShow) => !prevShow);
-	const handleToggle1 = () => setShow((prevShow) => !prevShow);
+	const handleToggle1 = () => setShow1((prevShow) => !prevShow);
 
 	const [filters] = useState([
 		{ id: 1, name: 'Filter 1', showStatus: '1' },
@@ -352,10 +435,8 @@ const MultiSelectComponent = () => {
 				focus={show}
 				buttonVariant='primary'
 				nowrap={true}
-				errorRequired={errorRequired}
-				setErrorRequiered={setErrorRequired}
-				validate={true}
-				requiredText='customizable text'
+				showError={false}
+				requiredText='Please select at least one filter'
 			/>
 			{/* OPCION 1 */}
 			<DropdownMultiSelect
@@ -372,10 +453,8 @@ const MultiSelectComponent = () => {
 				inputLabel={'Filters (array de objetos)'}
 				focus={show}
 				hasId={false}
-				errorRequired={errorRequired1}
-				setErrorRequiered={setErrorRequired1}
-				validate={true}
-				disableHash={true}
+				showError={false}
+				requiredText='Please select at least one filter'
 			/>
 		</>
 	);
@@ -384,32 +463,33 @@ const MultiSelectComponent = () => {
 export default MultiSelectComponent;
 ```
 
-| Property           | Type             | Required | Options                           | Default                                    | Description                                                                                                                                                                                                                                                                                                                                                      |
-| ------------------ | ---------------- | -------- | --------------------------------- | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `autoClose`        | Boolean / String | No       | `true` `false` `inside` `outside` | `false`                                    | Controls when the dropdown menu closes. If `false`, the menu does not close on click. If `true`, it closes when clicking an item in the list or outside the menu. If inside, it closes when clicking an item in the list but not when clicking outside the menu. If outside, it closes when clicking outside the menu but not when clicking an item in the list. |
-| `buttonVariant`    | String           | No       | `input`                           | `primary` `secondary` `terciary` `outline` | Defines the visual style of the button, used to toggle the dropdown menu.                                                                                                                                                                                                                                                                                        |
-| `className`        | String           | No       | n/a                               | n/a                                        | Adds custom CSS properties to style the component.                                                                                                                                                                                                                                                                                                               |
-| `drop`             | String           | No       | `up` `down`                       | n/a                                        | Specifies the direction in which the dropdown should open.                                                                                                                                                                                                                                                                                                       |
-| `focus`            | Boolean          | No       | `true` `false`                    | `false`                                    | If true, the search input will be focused when the dropdown is shown.                                                                                                                                                                                                                                                                                            |
-| `idInPill`         | Boolean          | No       | `true` `false`                    | `false`                                    | If true, ID will be shown in the pill component.                                                                                                                                                                                                                                                                                                                 |
-| `idKey`            | String           | No       | n/a                               | n/a                                        | Defines the key used in the object to find the item’s ID, allowing for the identification and handling of selected items and other operations within the component.                                                                                                                                                                                              |
-| `inputLabel`       | String           | No       | n/a                               | ''                                         | Allows customizing the label for the input field within the dropdown menu.                                                                                                                                                                                                                                                                                       |
-| `nameKey`          | String           | No       | n/a                               | n/a                                        | Defines the key that will be used in the object to display the item's name.                                                                                                                                                                                                                                                                                      |
-| `nameKey1`         | String           | No       | n/a                               | n/a                                        | You must provide the name of a key within an object. It will allow customization of the displayed value by internally concatenating and displaying "`nameKey` - `nameKey1 ` "                                                                                                                                                                                    |
-| `nowrap`           | Boolean          | No       | `true` `false`                    | `false`                                    | If `true`, the content will be displayed on a single line. If it exceeds the width, a scroll will be shown. If `false`, it will fit the width of the button. If it exceeds, the content will be displayed on multiple lines.                                                                                                                                     |
-| `object`           | Boolean          | No       | `true` `false`                    | `false`                                    | `object` determines whether the values in values are objects (with properties `nameKey` and `idKey`) or simple values (strings or numbers).                                                                                                                                                                                                                      |
-| `onToggle`         | Function         | No       | n/a                               | n/a                                        | Contains the handleToggle function which handles changing the show state between true and false, toggling the visibility of the menu.                                                                                                                                                                                                                            |
-| `overflow`         | Boolean          | No       | `true` `false`                    | `false`                                    | Whether to enable overflow strategy for the dropdown.                                                                                                                                                                                                                                                                                                            |
-| `searchLabel`      | String           | No       | n/a                               | 'Search'                                   | Label for the search input field.                                                                                                                                                                                                                                                                                                                                |
-| `show`             | Boolean          | No       | `true` `false`                    | n/a                                        | Controls the visibility of the dropdown.                                                                                                                                                                                                                                                                                                                         |
-| `showStatus`       | String           | No       | n/a                               | String                                     | Filter items by status if applicable.                                                                                                                                                                                                                                                                                                                            |
-| `values`           | Array            | No       | n/a                               | [ ]                                        | Available values for selection.                                                                                                                                                                                                                                                                                                                                  |
-| `valuesSelected`   | Array / Object   | No       | n/a                               | [ ]                                        | Represents the state of the values that are currently selected.                                                                                                                                                                                                                                                                                                  |
-| `hasId`            | Boolean          | No       | `true` `false`                    | `true`                                     | Controls wether the hashtag and id shows or not in the dropdown options                                                                                                                                                                                                                                                                                          |
-| `validate`         | Boolean          | No       | `true` `false`                    | `false`                                    | Enables validation (error). If true, it checks whether items have been selected from the dropdown. If false, no validation is performed.                                                                                                                                                                                                                         |
-| `requiredText`     | String           | No       | n/a                               | `'requiered'`                              | Text displayed when the field is required and triggers an error (`validate`). It can be customized.                                                                                                                                                                                                                                                              |
-| `errorRequired`    | Boolean          | No       | `false` `true`                    | `false`                                    | Determines when the error message is displayed. Defaults to false.                                                                                                                                                                                                                                                                                               |
-| `setErrorRequired	` | Function         | No       | n/a                               | n/a                                        | Allows users to control when the error is displayed and update its state (`errorRequired`).                                                                                                                                                                                                                                                                      |
+| Property     		     | Type             | Required | Options                           | Default                                    | Description                                                                                                                                                                                                                                                                                                                                                      |
+| ---------------------- | ---------------- | -------- | --------------------------------- | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `autoClose`       	 | Boolean / String | No       | `true` `false` `inside` `outside` | `false`                                    | Controls when the dropdown menu closes. If `false`, the menu does not close on click. If `true`, it closes when clicking an item in the list or outside the menu. If inside, it closes when clicking an item in the list but not when clicking outside the menu. If outside, it closes when clicking outside the menu but not when clicking an item in the list. |
+| `buttonVariant`   	 | String           | No       | `input`                           | `primary` `secondary` `terciary` `outline` | Defines the visual style of the button, used to toggle the dropdown menu.                                                                                                                                                                                                                                                                                        |
+| `className`       	 | String           | No       | n/a                               | n/a                                        | Adds custom CSS properties to style the component.                                                                                                                                                                                                                                                                                                               |
+| `customKey`     		 | String           | No       | n/a                               | n/a                                        | You must provide the name of a key within an object. It will allow customization of the displayed value by internally concatenating and displaying "`nameKey` - `customKey`"                                                                                                                                                                                     |
+| `drop`             	 | String           | No       | `up` `down`                       | n/a                                        | Specifies the direction in which the dropdown should open.                                                                                                                                                                                                                                                                                                       |
+| `focus`           	 | Boolean          | No       | `true` `false`                    | `false`                                    | If true, the search input will be focused when the dropdown is shown.                                                                                                                                                                                                                                                                                            |
+| `hasId`           	 | Boolean          | No       | `true` `false`                    | `true`                                     | Controls wether the hashtag and id shows or not in the dropdown options                                                                                                                                                                                                                                                                                          |
+| `idInPill`       		 | Boolean          | No       | `true` `false`                    | `false`                                    | If true, ID will be shown in the pill component.                                                                                                                                                                                                                                                                                                                 |
+| `idKey`          		 | String           | No       | n/a                               | n/a                                        | Defines the key used in the object to find the item's ID, allowing for the identification and handling of selected items and other operations within the component.                                                                                                                                                                                              |
+| `inputLabel`     	  	 | String           | No       | n/a                               | ''                                         | Allows customizing the label for the input field within the dropdown menu.                                                                                                                                                                                                                                                                                       |
+| `nameKey`         	 | String           | No       | n/a                               | n/a                                        | Defines the key that will be used in the object to display the item's name.                                                                                                                                                                                                                                                                                      |
+| `notMatchedText`  	 | String           | No       | n/a                               | 'No match found'                         	| Text displayed when no matching items are found.                                                                                                                                                                                                                                                                                                                 |
+| `nowrap`          	 | Boolean          | No       | `true` `false`                    | `false`                                    | If `true`, the content will be displayed on a single line. If it exceeds the width, a scroll will be shown. If `false`, it will fit the width of the button. If it exceeds, the content will be displayed on multiple lines.                                                                                                                                     |
+| `object`          	 | Boolean          | No       | `true` `false`                    | `false`                                    | `object` determines whether the values in values are objects (with properties `nameKey` and `idKey`) or simple values (strings or numbers).                                                                                                                                                                                                                      |
+| `onToggle`        	 | Function         | No       | n/a                               | n/a                                        | Contains the handleToggle function which handles changing the show state between true and false, toggling the visibility of the menu.                                                                                                                                                                                                                            |
+| `overflow`        	 | Boolean          | No       | `true` `false`                    | `false`                                    | Whether to enable overflow strategy for the dropdown.                                                                                                                                                                                                                                                                                                            |
+| `requiredText`    	 | String           | No       | n/a                               | 'Required'                             	| Error message displayed when validation fails. Used with `showError` prop.                                                                                                                                                                                                                                                                                       |
+| `searchLabel`     	 | String           | No       | n/a                               | 'Search'                                 	| Label for the search input field.                                                                                                                                                                                                                                                                                                                                |
+| `setValuesSelected` 	 | Function         | No       | n/a                               | n/a                                        | Allows users to control the values that are currently selected.                                                                                                                                                                                                                                                                                                  |
+| `setShow`          	 | Function         | No       | n/a                               | n/a                                        | Function to update the visibility state of the dropdown.                                                                                                                                                                                                                                                                                                         |
+| `show`            	 | Boolean          | No       | `true` `false`                    | n/a                                        | Controls the visibility of the dropdown.                                                                                                                                                                                                                                                                                                                         |
+| `showError`       	 | Boolean          | No       | `true` `false`                    | `false`                                    | If `true`, displays the dropdown in error state with `not-validated` class. Controlled externally for validation.                                                                                                                                                                                                                                                |
+| `showStatus`      	 | String           | No       | n/a                               | String                                     | Filter items by status if applicable.                                                                                                                                                                                                                                                                                                                            |
+| `values`         		 | Array            | No       | n/a                               | [ ]                                        | Available values for selection.                                                                                                                                                                                                                                                                                                                                  |
+| `valuesSelected`  	 | Array / Object   | No       | n/a                               | [ ]                                        | Represents the state of the values that are currently selected.                                                                                                                                                                                                                                                                                                  |
 
 ### DropdownSimpleDatePicker
 
@@ -455,18 +535,19 @@ export default DropdownSimpleDatePickerExample;
 | Property       | Type     | Required | Option         | Default  | Description                                                                                                                                              |
 | -------------- | -------- | -------- | -------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `className`    | String   | No       | n/a            | n/a      | Adds a custom CSS class to the component.                                                                                                                |
-| `show`         | Boolean  | No       | `true` `false` | `false`  | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden.                                                     |
-| `setShow`      | Function | No       | n/a            | n/a      | Function to update the visibility state of the dropdown.                                                                                                 |
-| `onToggle`     | Function | No       | n/a            | n/a      | Function that is called when the dropdown is toggled.                                                                                                    |
-| `inputLabel`   | String   | No       | n/a            | `period` | Label to display on the dropdown toggle button.                                                                                                          |
-| `overflow`     | Boolean  | No       | `true` `false` | `false`  | Adjusts the dropdown's position to handle overflow situations.                                                                                           |
 | `date`         | String   | No       | n/a            | `null`   | Selected date.                                                                                                                                           |
-| `setDate`      | Function | No       | n/a            | n/a      | Function that updates the start date.                                                                                                                    |
+| `disabled`     | Boolean  | No       | `true` `false` | `false`  | If `true`, disables the dropdown. If `false`, the dropdown is enabled.                                                                     			  |
 | `handleClear`  | Function | No       | n/a            | n/a      | Allows providing, as needed, a function to reset the date, update the state as necessary, etc. If none is provided, the date will be cleared by default. |
-| `minDate`      | Object   | No       | n/a            | n/a      | Min date filter.                                                                                                                                         |
+| `inputLabel`   | String   | No       | n/a            | `period` | Label to display on the dropdown toggle button.                                                                                                          |
 | `maxDate`      | Object   | No       | n/a            | n/a      | Max date filter.                                                                                                                                         |
+| `minDate`      | Object   | No       | n/a            | n/a      | Min date filter.                                                                                                                                         |
+| `onToggle`     | Function | No       | n/a            | n/a      | Function that is called when the dropdown is toggled.                                                                                                    |
+| `overflow`     | Boolean  | No       | `true` `false` | `false`  | Adjusts the dropdown's position to handle overflow situations.                                                                                           |
 | `requiredText` | String   | No       | n/a            | n/a      | Text displayed when input validation fails, used to indicate an error.                                                                                   |
-| `setShowError` | Function | No       | n/a            | n/a      | Function used to change the state of `showError`.                                                                                                        |
+| `setDate`      | Function | No       | n/a            | n/a      | Function that updates the start date.                                                                                                                    |
+| `setShow`      | Function | No       | n/a            | n/a      | Function to update the visibility state of the dropdown.                                                                                                 |
+| `show`         | Boolean  | No       | `true` `false` | `false`  | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden.                                                     |
+| `showError`    | Boolean  | No       | `true` `false` | `false`  | If true, the input will be displayed with an error.                                                                                                      |
 
 ### Checkbox
 
@@ -497,9 +578,11 @@ export default CheckboxComponent;
 | ----------- | -------- | -------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------- |
 | `children`  | Node     | No       | n/a            | n/a     | Content that is rendered as the label for the checkbox.                                                       |
 | `className` | String   | No       | n/a            | n/a     | Additional CSS class names that can be applied to the checkbox.                                               |
+| `disabled`  | Boolean  | No       | `true` `false` | `false` | If `true`, disables the checkbox. If `false`, the checkbox is enabled.                                        |
 | `id`        | String   | No       | n/a            | n/a     | The unique identifier for the checkbox. It's required for associating the label and checkbox.                 |
 | `name`      | String   | No       | n/a            | n/a     | The `name` attribute of the checkbox. Used to identify the form data after it's submitted.                    |
 | `setStatus` | Function | No       | n/a            | n/a     | Function to set the `status` of the checkbox. This is a handler function typically used for state management. |
+| `size`      | String   | No       | `xs` `md` `lg` | `md`    | Sets the size of the checkbox.                                                                                |
 | `status`    | Boolean  | No       | `true` `false` | `false` | Indicates whether the checkbox is checked, `true` or unchecked `false`.                                       |
 
 ### Input
@@ -545,28 +628,28 @@ const InputComponent = () => {
 export default InputComponent;
 ```
 
-| Property       | Type            | Required | Options                                                                                                             | Default | Description                                                                                                                                                     |
-| -------------- | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `autoFocus`    | Boolean         | No       | `true` `false`                                                                                                      | `false` | If true, automatically focuses the input when the component mounts.                                                                                             |
-| `className`    | String          | No       | n/a                                                                                                                 | n/a     | Additional CSS class names that can be applied to the input.                                                                                                    |
-| `disabled`     | Boolean         | No       | `true` `false`                                                                                                      | `false` | If true, disables the input field.                                                                                                                              |
-| `focus`        | Boolean         | No       | `true` `false`                                                                                                      | `false` | Controls whether the input field should automatically receive focus when the component is rendered.                                                             |
-| `helpText`     | String          | No       | n/a                                                                                                                 | n/a     | Optional text under the input to guide the user or provide additional information.                                                                              |
-| `icon`         | String          | No       | n/a                                                                                                                 | n/a     | Specifies the name of the icon to be displayed inside the input.                                                                                                |
-| `label`        | String          | No       | n/a                                                                                                                 | 'Label' | Input field that handles different `type` of data based on the assigned type prop. Allows for adding icons, managing error messages, and other functionalities. |
-| `max`          | Number          | No       | n/a                                                                                                                 | n/a     | Specifies the maximum value that the input field can accept.                                                                                                    |
-| `maxLength`    | Number          | No       | n/a                                                                                                                 | n/a     | Specifies the maximum number of characters that the input field can accept.                                                                                     |
-| `min`          | Number          | No       | n/a                                                                                                                 | n/a     | Specifies the minimum value that the input field can accept.                                                                                                    |
-| `name`         | String          | No       | n/a                                                                                                                 | n/a     | Indicates the name attribute for the input element, which represents the form data after it is submitted.                                                       |
-| `onChange`     | Function        | No       | n/a                                                                                                                 | n/a     | Allows the user to update the value of the input field and synchronizes the field's value with the component's internal state.                                  |
-| `prefix`       | String          | No       | n/a                                                                                                                 | n/a     | Text or characters to display at the start of the input, e.g., 'USD' for currency.                                                                              |
-| `requiredText` | String          | No       | n/a                                                                                                                 | n/a     | Text displayed when input validation fails, used to indicate an error.                                                                                          |
-| `setShowError` | Function        | No       | n/a                                                                                                                 | n/a     | Function used to change the state of `showError`.                                                                                                               |
-| `size`         | String          | No       | `xs` `md` `lg`                                                                                                      | `md`    | Sets the size of the input field.                                                                                                                               |
-| `suffix`       | String          | No       | n/a                                                                                                                 | n/a     | Optional suffix text to display inside the input field.                                                                                                         |
-| `showError`    | Boolean         | No       | `true` `false`                                                                                                      | `false` | If true, indicates that an error message should be displayed, usually controlled by `setShowError`.                                                             |
-| `type`         | String          | No       | `color` `date` `datetime-local` `email` `file` `image` `month` `number` `password` `tel` `text` `time` `url` `week` | `text`  | Type of input                                                                                                                                                   |
-| `value`        | String / Number | No       | n/a                                                                                                                 | n/a     | The value of the input.                                                                                                                                         |
+| Property       | Type            | Required | Options                                                                                                             | Default 		| Description                                                                                                                                                     |
+| -------------- | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `autoFocus`    | Boolean         | No       | `true` `false`                                                                                                      | `false` 		| If true, automatically focuses the input when the component mounts.                                                                                             |
+| `className`    | String          | No       | n/a                                                                                                                 | n/a     		| Additional CSS class names that can be applied to the input.                                                                                                    |
+| `disabled`     | Boolean         | No       | `true` `false`                                                                                                      | `false` 		| If true, disables the input field.                                                                                                                              |
+| `focus`        | Boolean         | No       | `true` `false`                                                                                                      | `false` 		| Controls whether the input field should automatically receive focus when the component is rendered.                                                             |
+| `helpText`     | String          | No       | n/a                                                                                                                 | n/a     		| Optional text under the input to guide the user or provide additional information.                                                                              |
+| `icon`         | String          | No       | n/a                                                                                                                 | n/a     		| Specifies the name of the icon to be displayed inside the input.                                                                                                |
+| `label`        | String          | No       | n/a                                                                                                                 | 'Input label' | Input field that handles different `type` of data based on the assigned type prop. Allows for adding icons, managing error messages, and other functionalities. |
+| `max`          | Number          | No       | n/a                                                                                                                 | n/a     		| Specifies the maximum value that the input field can accept.                                                                                                    |
+| `maxLength`    | Number          | No       | n/a                                                                                                                 | n/a     		| Specifies the maximum number of characters that the input field can accept.                                                                                     |
+| `min`          | Number          | No       | n/a                                                                                                                 | n/a     		| Specifies the minimum value that the input field can accept.                                                                                                    |
+| `name`         | String          | No       | n/a                                                                                                                 | n/a     		| Indicates the name attribute for the input element, which represents the form data after it is submitted.                                                       |
+| `onChange`     | Function        | No       | n/a                                                                                                                 | n/a    		| Allows the user to update the value of the input field and synchronizes the field's value with the component's internal state.                                  |
+| `prefix`       | String          | No       | n/a                                                                                                                 | n/a    		| Text or characters to display at the start of the input, e.g., 'USD' for currency.                                                                              |
+| `requiredText` | String          | No       | n/a                                                                                                                 | n/a    		| Text displayed when input validation fails, used to indicate an error.                                                                                          |
+| `setShowError` | Function        | No       | n/a                                                                                                                 | n/a     		| Function used to change the state of `showError`.                                                                                                               |
+| `showError`    | Boolean         | No       | `true` `false`                                                                                                      | `false` 		| If true, indicates that an error message should be displayed, usually controlled by `setShowError`.                                                             |
+| `size`         | String          | No       | `xs` `md` `lg`                                                                                                      | `md`    		| Sets the size of the input field.                                                                                                                               |
+| `suffix`       | String          | No       | n/a                                                                                                                 | n/a     		| Optional suffix text to display inside the input field.                                                                                                         |
+| `type`         | String          | No       | `color` `date` `datetime-local` `email` `file` `image` `month` `number` `password` `tel` `text` `time` `url` `week` | `text`  		| Type of input                                                                                                                                                   |
+| `value`        | String / Number | No       | n/a                                                                                                                 | n/a     		| The value of the input.                                                                                                                                         |
 
 ### InputChip
 
@@ -610,18 +693,21 @@ export default ExampleInputChip;
 
 ```
 
-| Property                    | Type    | Required | Options                                                                   | Default   | Description                                                                                                                                                                                                                                    |
-| --------------------------- | ------- | -------- | ------------------------------------------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`                 | String  | No       | n/a                                                                       | n/a       | Additional CSS class names that can be applied to the inputChip.                                                                                                                                                                               |
-| `placeholder`               | String  | Yes      | n/a                                                                       | n/a       | Displays a suggested or descriptive text inside the input field before the user types.                                                                                                                                                         |
-| `keywordsList`              | Array   | Yes      | n/a                                                                       | n/a       | This property expects an array of keywords. You can initialize it as an empty array or with keywords, and it will be updated when new keywords are added or removed from the input field.                                                      |
-| `setKeywordsList`           | String  | Yes      | n/a                                                                       | n/a       | Dynamically updates the list of keywords. It is called when a new keyword is added or removed from the list. The updated array will be passed to the `keywordsList` prop.                                                                      |
-| `counter`                   | Boolean | No       | n/a                                                                       | false     | If true, it will display a progressive and numeric counter of keywords. If false, it will not display it.                                                                                                                                      |
-| `pillColor`                 | String  | No       | `blue` `danger` `dark` `green` `light` `midtone` `neutral` `red` `yellow` | `neutral` | Define the color of the keyword.                                                                                                                                                                                                               |
-| `recomendedKeywords`        | Number  | No       | n/a                                                                       | n/a       | Specifies the recommended number of keywords. When the keywords list (`keywordsList`) reaches the recommended number, the counter's status will change to the 'warning' color.                                                                 |
-| `maxKeywords`               | Number  | Yes      | n/a                                                                       | n/a       | Indicates the maximum number of allowed keywords. When the keywordsList reaches this limit, an error message defined in requiredText will be displayed. Additionally, if the counter is enabled, its status will change to the 'danger' color. |
-| `requiredText`              | String  | Yes      | n/a                                                                       | n/a       | Texto que se mostrará como error cuando la lista de keywords (keywordsList) alcance el límite máximo definido en maxKeywords.                                                                                                                  |
-| `duplicateKeywordErrorText` | String  | No       | n/a                                                                       | n/a       | Allows you to add a custom message when trying to add a keyword that already exists.                                                                                                                                                           |
+| Property                    | Type    | Required | Options                                                                   | Default   				| Description                                                                                                                                                                                                                                    |
+| --------------------------- | ------- | -------- | ------------------------------------------------------------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `autoFocus`                 | Boolean | No       | `true` `false`                                                            | `false`                | If true, automatically focuses the input when the component mounts.                                                                                                                                                                            |
+| `className`                 | String  | No       | n/a                                                                       | n/a       				| Additional CSS class names that can be applied to the inputChip.                                                                                                                                                                               |
+| `counter`                   | Boolean | No       | n/a                                                                       | `false`   				| If true, it will display a progressive and numeric counter of keywords. If false, it will not display it.                                                                                                                                      |
+| `disabled`                  | Boolean | No       | `true` `false` 														   | `false`  				| If `true`, disables the inputChip. If `false`, the inputChip is enabled.                                                                     			  																						 |
+| `duplicateKeywordErrorText` | String  | No       | n/a                                                                       | 'Duplicate keyword.' 	| Allows you to add a custom message when trying to add a keyword that already exists.                                                                                                                                                           |
+| `keywordsList`              | Array   | Yes      | n/a                                                                       | n/a       				| This property expects an array of keywords. You can initialize it as an empty array or with keywords, and it will be updated when new keywords are added or removed from the input field.                                                      |
+| `maxKeywords`               | Number  | Yes      | n/a                                                                       | n/a       				| Indicates the maximum number of allowed keywords. When the keywordsList reaches this limit, an error message defined in requiredText will be displayed. Additionally, if the counter is enabled, its status will change to the 'danger' color. |
+| `maxKeywordLength`          | Number  | No       | n/a                                                                       | n/a       				| Indicates the maximum length of each keyword. When a keyword exceeds this limit, an error message defined in `duplicateKeywordErrorText` will be displayed.                                                                                    |
+| `pillColor`                 | String  | No       | `blue` `danger` `dark` `green` `light` `midtone` `neutral` `red` `yellow` | `neutral` 				| Define the color of the keyword.                                                                                                                                                                                                               |
+| `placeholder`               | String  | Yes      | n/a                                                                       | 'Add keywords…'		| Displays a suggested or descriptive text inside the input field before the user types.                                                                                                                                                         |
+| `recomendedKeywords`        | Number  | No       | n/a                                                                       | n/a       				| Specifies the recommended number of keywords. When the keywords list (`keywordsList`) reaches the recommended number, the counter's status will change to the 'warning' color.                                                                 |
+| `requiredText`              | String  | Yes      | n/a                                                                       | n/a       				| Texto que se mostrará como error cuando la lista de keywords (keywordsList) alcance el límite máximo definido en maxKeywords.                                                                                                                  |
+| `setKeywordsList`           | String  | Yes      | n/a                                                                       | n/a       				| Dynamically updates the list of keywords. It is called when a new keyword is added or removed from the list. The updated array will be passed to the `keywordsList` prop.                                                                      |
 
 ### InputEmail
 
@@ -649,15 +735,16 @@ const ExampleInputEmail = () => {
 export default ExampleInputChip;
 ```
 
-| Property       | Type    | Required | Options        | Default | Description                                                                                                                                      |
-| -------------- | ------- | -------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `apiGetEmail`  | Array   | Yes      | n/a            | n/a     | Endpoint required to fetch the email list. The response should be an array of strings (or empy array) displayed below the input and `titleList`. |
-| `apiPostEmail` | String  | Yes      | n/a            | n/a     | An endpoint is required to add or remove emails from the existing email list.                                                                    |
-| `label`        | String  | No       | n/a            | ''      | Allows adding custom text as the input label.                                                                                                    |
-| `showModal`    | Boolean | No       | `true` `false` | `true`  | If true, the email list received from apiGetEmail will be shown when rendering InputEmail.                                                       |
-| `textButton`   | String  | No       | n/a            | ''      | Allows adding custom text to the button for adding emails.                                                                                       |
-| `textError`    | String  | No       | n/a            | ''      | Allows adding custom error text when entering an invalid email address.                                                                          |
-| `titleList`    | String  | No       | n/a            | ''      | Allows adding a custom text that will be shown as the title of the email list.                                                                   |
+| Property       | Type    | Required | Options        | Default 								| Description                                                                                                                                      |
+| -------------- | ------- | -------- | -------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `apiGetEmail`  | Array   | Yes      | n/a            | n/a     								| Endpoint required to fetch the email list. The response should be an array of strings (or empy array) displayed below the input and `titleList`. |
+| `apiPostEmail` | String  | Yes      | n/a            | n/a     								| An endpoint is required to add or remove emails from the existing email list.                                                                    |
+| `disabled`     | Boolean | No       | `true` `false` | `false` 								| If `true`, disables the inputEmail. If `false`, the inputEmail is enabled.                                                          			   |
+| `label`        | String  | No       | n/a            | 'Email addresses'      				| Allows adding custom text as the input label.                                                                                                    |
+| `showModal`    | Boolean | No       | `true` `false` | `true`  								| If true, the email list received from apiGetEmail will be shown when rendering InputEmail.                                                       |
+| `textButton`   | String  | No       | n/a            | 'Add'      							| Allows adding custom text to the button for adding emails.                                                                                       |
+| `textError`    | String  | No       | n/a            | 'You must enter a valid email address' | Allows adding custom error text when entering an invalid email address.                                                                          |
+| `titleList`    | String  | No       | n/a            | 'Added emails'      					| Allows adding a custom text that will be shown as the title of the email list.                                                                   |
 
 ### Radio
 
@@ -678,10 +765,14 @@ import { Radio } from 'groovinads-ui';
 
 | Property    | Type     | Required | Options        | Default | Description                                                                                                                     |
 | ----------- | -------- | -------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `children`  | Node     | Yes      | n/a            | n/a     | Content to be displayed inside the radio button.                                                                                |
 | `className` | String   | No       | n/a            | n/a     | Additional CSS class names that can be applied to the radio button.                                                             |
+| `disabled`  | Boolean  | No       | `true` `false` | `false` | If `true`, disables the radio button. If `false`, the radio button is enabled.                                                  |
 | `id`        | String   | No       | n/a            | n/a     | The unique identifier for the radio button. It is used for linking the label and the radio button.                              |
+| `fullWidth` | Boolean  | No       | `true` `false` | `false` | If `true`, the radio button will take the full width of its container.                                                          |
 | `name`      | String   | No       | n/a            | n/a     | The name attribute of the radio button. Used to group multiple radios into a single group.                                      |
 | `setStatus` | Function | No       | n/a            | n/a     | It is used to update the selection state of the radio button based on user interaction.                                         |
+| `size`      | String   | No       | `xs` `md` `lg` | `md`    | Sets the size of the radio button.                                                                                				 |
 | `status`    | Boolean  | No       | `true` `false` | `false` | Indicates whether the radio button is selected (true, the radio button appears selected) or not (false, it appears unselected). |
 
 ### Switch
@@ -702,11 +793,14 @@ import { Switch } from 'groovinads-ui';
 
 | Property         | Type             | Required | Options        | Default | Description                                                                                                                               |
 | ---------------- | ---------------- | -------- | -------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `children`       | Node             | No       | n/a            | n/a     | Content to be displayed inside the switch.                                                                                            	|
 | `className`      | String           | No       | n/a            | ' '     | Additional CSS class names that can be applied to the switch.                                                                             |
+| `disabled`       | Boolean          | No       | `true` `false` | `false` | If `true`, disables the switch. If `false`, the switch is enabled.                                                                        |
 | `icon`           | Boolean          | No       | `true` `false` | `false` | If `true`, displays an icon (play/pause) inside the switch.                                                                               |
 | `id`             | String           | No       | n/a            | n/a     | It will be used as the id of the switch input. If not specified, an ID will be automatically generated based on the text of the children. |
 | `name`           | String           | No       | n/a            | n/a     | The name attribute of the switch. Used to identify the form data after it's submitted.                                                    |
 | `setStatus`      | Function         | No       | n/a            | n/a     | Function to set the `status` of the switch. This is a handler function typically used for state management.                               |
+| `size`           | String           | No       | `xs` `md` `lg` | `md`    | Sets the size of the switch.                                                                                                              |
 | `status`         | Number / Boolean | No       | `0` `1`        | `0`     | Indicates whether the switch is on (`1` / `true`) or off (`0` / `false`).                                                                 |
 | `switchPosition` | String           | No       | `start` `end`  | `start` | Determines the position of the switch relative to the label.                                                                              |
 
@@ -726,18 +820,19 @@ import { Textarea } from 'groovinads-ui';
 />;
 ```
 
-| Property       | Type     | Required | Options        | Default | Description                                                                                |
-| -------------- | -------- | -------- | -------------- | ------- | ------------------------------------------------------------------------------------------ |
-| `className`    | String   | No       | n/a            | n/a     | Additional CSS class names that can be applied to the textarea.                            |
-| `helpText`     | String   | No       | n/a            | n/a     | Optional text under the textarea to guide the user or provide additional help information. |
-| `label`        | String   | No       | n/a            | 'Label' | Text label for the textarea field.                                                         |
-| `name`         | String   | No       | n/a            | n/a     | Attribute of the textarea. Used to identify the form data after it's submitted.            |
-| `onChange`     | Function | No       | n/a            | n/a     | Function to handle changes to the textarea's value. Typically used to update state.        |
-| `requiredText` | String   | No       | n/a            | n/a     | Text displayed when textarea validation fails, used to indicate an error.                  |
-| `setShowError` | Function | No       | n/a            | n/a     | Function to set the visibility of the error message.                                       |
-| `showError`    | Boolean  | No       | `true` `false` | `false` | If true, indicates that an error message should be displayed controlled by `setShowError`. |
-| `size`         | String   | No       | `xs` `md` `lg` | `md`    | Sets the size of the textarea field.                                                       |
-| `value`        | String   | No       | n/a            | n/a     | The value of the textarea.                                                                 |
+| Property       | Type     | Required | Options        | Default 			| Description                                                                                |
+| -------------- | -------- | -------- | -------------- | ----------------- | ------------------------------------------------------------------------------------------ |
+| `className`    | String   | No       | n/a            | n/a     			| Additional CSS class names that can be applied to the textarea.                            |
+| `disabled`     | Boolean  | No       | `true` `false` | `false` 			| If `true`, disables the textarea. If `false`, the textarea is enabled.                   	 |
+| `helpText`     | String   | No       | n/a            | n/a     			| Optional text under the textarea to guide the user or provide additional help information. |
+| `label`        | String   | No       | n/a            | 'Textarea label'  | Text label for the textarea field.                                                         |
+| `name`         | String   | No       | n/a            | n/a     			| Attribute of the textarea. Used to identify the form data after it's submitted.            |
+| `onChange`     | Function | No       | n/a            | n/a     			| Function to handle changes to the textarea's value. Typically used to update state.        |
+| `requiredText` | String   | No       | n/a            | n/a     			| Text displayed when textarea validation fails, used to indicate an error.                  |
+| `setShowError` | Function | No       | n/a            | n/a    			| Function to set the visibility of the error message.                                       |
+| `showError`    | Boolean  | No       | `true` `false` | `false` 			| If true, indicates that an error message should be displayed controlled by `setShowError`. |
+| `size`         | String   | No       | `xs` `md` `lg` | `md`    			| Sets the size of the textarea field.                                                       |
+| `value`        | String   | No       | n/a            | n/a     			| The value of the textarea.                                                                 |
 
 ## Labels
 
@@ -775,9 +870,28 @@ export default ExampleAlert;
 | `className` | String   | No       | n/a                                 | n/a     | Additional CSS class for the alert.                                                                                                                     |
 | `icon`      | Boolean  | No       | `true` `false`                      | `true`  | If true, displays an icon in the alert. The icon can vary depending on the alert `type` and settings. If false, no icon is displayed in the alert.      |
 | `onClose`   | Function | No       | n/a                                 | `null`  | By default, `onClose` is `null`. You can provide a function for this property, which allows you to perform additional actions when the alert is closed. |
-| `size`      | String   | No       | `xs` `md` `lg` `md`                 | `info`  | Size of the alert.                                                                                                                                      |
+| `size`      | String   | No       | `xs` `md` `lg` `md`                 | `md`  	| Size of the alert.                                                                                                                                      |
 | `type`      | String   | Yes      | `info` `success` `warning` `danger` | `info`  | Type of alert to display. Each `type` has a specific associated icon.                                                                                   |
 
+
+### EditableContent
+
+```jsx
+import React from 'react';
+import { EditableContent } from 'groovinads-ui';
+
+<EditableContent value='Hello, world!' onChange={() => console.log('changed')} onSave={() => console.log('saved')} />;
+```
+
+| Property    | Type     | Required | Options                             			 | Default  | Description                                      		|
+| ----------- | -------- | -------- | ---------------------------------------------- | -------- | ------------------------------------------------------|
+| `as`        | String   | Yes      | `h1` `h2` `h3` `h4` `h5` `h6` `p` `span` `div` | n/a   	| The HTML element to render the content.               |
+| `className` | String   | No       | n/a                                 			 | n/a     	| Additional CSS class for the editable content.        |
+| `onChange`  | Function | Yes      | n/a                                 			 | n/a     	| Function to handle changes to the editable content.   |
+| `onSave`    | Function | Yes      | n/a                                 			 | n/a     	| Function to handle saving the editable content.       |
+| `value`     | String   | No       | n/a                                 			 | n/a     	| The value of the editable content.                    |
+
+
 ### Icon
 
 ```jsx
@@ -787,7 +901,7 @@ import { Icon } from 'groovinads-ui';
 <Icon
 	style='solid'
 	scale={1}
-	iconName='location-dot'
+	name='location-dot'
 	className=''
 	animation=''
 />;
@@ -797,9 +911,9 @@ import { Icon } from 'groovinads-ui';
 | ----------- | ------ | -------- | ----------------------------------------------------------------------- | -------------------- | ---------------------------------- |
 | `animation` | String | No       | `beat` `fade` `beat-fade` `bounce` `flip` `shake` `spin` `spin-reverse` | String               | Animation for the icon.            |
 | `className` | String | No       | n/a                                                                     | n/a                  | Additional CSS class for the icon. |
-| `iconName`  | String | No       | n/a                                                                     | `user-bounty-hunter` | Name of the icon.                  |
+| `name`  	  | String | No       | n/a                                                                     | `user-bounty-hunter` | Name of the icon.                  |
 | `scale`     | Number | No       | `0.7`, `1`, `2`, `3`, `4`                                               | `1`                  | Scale of the icon.                 |
-| `style`     | String | No       | `light` `solid` `regular` `thin` `duotone` `sharp`                      | `solid`              | Style of the icon.                 |
+| `style`     | String | No       | `light` `solid` `regular` `thin` `duotone` `sharp` `brands`             | `solid`              | Style of the icon.                 |
 
 ### LoginSource
 
@@ -810,9 +924,10 @@ import { LoginSource } from 'groovinads-ui';
 <LoginSource logo={'groovinads'} />;
 ```
 
-| Property | Type   | Required | Options                                      | Default      | Description                                                    |
-| -------- | ------ | -------- | -------------------------------------------- | ------------ | -------------------------------------------------------------- |
-| `logo`   | String | No       | `groovinads` `google` `microsoft` `linkedin` | `groovinads` | Specifies the logo to be displayed on the login source button. |
+| Property 	  | Type   | Required | Options                                      		 | Default      | Description                                                    |
+| ----------- | ------ | -------- | ---------------------------------------------------- | ------------ | -------------------------------------------------------------- |
+| `className` | String | No       | n/a            										 | n/a     		| Additional CSS class for the login source button. 		     |
+| `logo`   	  | String | No       | `groovinads` `google` `microsoft` `linkedin` `slack` | `groovinads` | Specifies the logo to be displayed on the login source button. |
 
 ### PillComponent
 
@@ -854,6 +969,7 @@ export default PillComponentExample;
 | `className`   | String   | No       | n/a                                                                       | n/a       | Additional CSS class names that can be applied to the pill. Defaults to an empty string.                           |
 | `closeButton` | Boolean  | No       | `true` `false`                                                            | `false`   | If true, a close button is displayed on the pill, allowing it to be dismissed. If false, no close button is shown. |
 | `color`       | String   | No       | `blue` `danger` `dark` `green` `light` `midtone` `neutral` `red` `yellow` | `neutral` | Specifies the background color of the pill.                                                                        |
+| `disabled`    | Boolean  | No       | `true` `false`                                                            | `false`   | If `true`, disables the pill. If `false`, the pill is enabled.                                                     |
 | `onClick`     | Function | No       | n/a                                                                       | n/a       | Handles the click event to close the pill. This property is only relevant if closeButton is set to true.           |
 
 ### Spinner
@@ -866,10 +982,10 @@ import { Spinner } from 'groovinads-ui';
 <Spinner scale={3} className='m-5' />;
 ```
 
-| Property    | Type   | Required | Options           | Default | Description                           |
-| ----------- | ------ | -------- | ----------------- | ------- | ------------------------------------- |
-| `scale`     | Number | No       | `0.7` `1` `2` `3` | `1`     | Scale (size) of the spinner.          |
-| `className` | String | No       | n/a               | n/a     | Additional CSS class for the spinner. |
+| Property    | Type   | Required | Options           	  | Default | Description                           |
+| ----------- | ------ | -------- | --------------------- | ------- | ------------------------------------- |
+| `className` | String | No       | n/a               	  | n/a     | Additional CSS class for the spinner. |
+| `scale`     | Number | No       | `0.7` `1` `2` `3` `4` | `1`     | Scale (size) of the spinner.          |
 
 ### StatusIcon
 
@@ -898,8 +1014,78 @@ export default StatusIconExamples;
 | `className` | String  | No       | n/a                 | n/a     | Add additional CSS class names for custom styling.                                                                                                                                                |
 | `status`    | Number  | Yes      | `0` `1` `3` `4` `5` | `0`     | Specifies the visual state of the icon: Inactive (`0`), active (`1`), active-warning (`3`), warning (`4`), and danger (`5`). Each state reflects a specific condition of the system or interface. |
 
+## Modals
+
+### ModalComponent
+
+```jsx
+import React from 'react';
+import { ModalComponent } from 'groovinads-ui';
+
+<ModalComponent
+	show={show}
+	setShow={setShow}
+	header={'Modal title'}
+	footer={
+		<>
+			<div className='d-flex justify-content-end flex-row w-100 gap-3'>
+				<Button
+					variant='primary'
+					onClick={() => {
+						alert('Action confirmed');
+						setShow(false);
+					}}
+				>
+					Confirm
+				</Button>
+				<Button variant='secondary' onClick={() => setShow(false)}>
+					Cancel
+				</Button>
+			</div>
+			<Button variant='terciary' onClick={() => setShow(false)}>Adios</Button>
+		</>
+	}
+>
+	<p>
+		This is the content of the modal. Here you can add any
+		information or form that you need.
+	</p>
+</ModalComponent>
+```
+
+| Property       	 | Type    			 | Required | Options        					| Default 			| Description                                                                                                   																|
+| ------------------ | ----------------- | -------- | --------------------------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`     	 | String     		 | No       | n/a            					| n/a     			| Allows adding custom CSS classes to the Modal.                                                            																	|
+| `children`     	 | Node     		 | Yes      | n/a            					| n/a     			| Allows inserting custom content within the Modal.                                                            																	|
+| `footer`     		 | Node     		 | No       | n/a            					| n/a     			| Allows inserting custom content within the Modal footer. If not provided, the footer is not displayed.                                                            			|
+| `header`     		 | String / Node     | Yes      | n/a            					| n/a     			| Allows inserting custom content within the Modal header. 																														|
+| `setShow`      	 | Function 		 | Yes      | n/a            					| n/a     			| Function to toggle the visibility state between visible and hidden.                                           																|
+| `show`         	 | Boolean  		 | Yes      | `true` `false` 					| n/a      			| Controls the visibility of the Modal. If `true`, the Modal is displayed; if `false`, it is hidden.        																	|
+| `size`         	 | String   		 | No       | `sm` `md` `lg` 					| `md`     			| Sets the size of the Modal. It's optional.                                                                      																|
+| `type`         	 | String   		 | No       | `default` `confirmation` `error` 	| `default`     	| Defines the type of the modal (optional). Each type has its own animation and behavior. If set to `default`, a class is added that applies `flow-reverse`, making the footer buttons appear inverted (on the right, not applied on mobile); if set to `confirmation` or `error`, they appear on the left. Defaults to default if not specified. |
+
 ## Navigation
 
+### Aside
+```jsx
+import React from 'react';
+import { Aside } from 'groovinads-ui';
+
+<Aside show={show} onHide={() => setShow(false)} header='Aside Title'>
+	<p>This is the default aside panel. It slides in from the right side of the screen and includes a header with a close button.</p>
+</Aside>
+```
+
+| Property       	| Type     			| Required 		 | Options        | Default 			 | Description                                                                                                   														 |
+| ----------------- | ----------------- | -------------- | -------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `backdrop`     	| Boolean  			| No       		 | `true` `false` | `false` 			 | Controls the visibility of the backdrop. If `true`, the backdrop is displayed; if `false`, it is hidden.        														 |
+| `belowNavbar`  	| Boolean  			| No       		 | `true` `false` | `false` 			 | Controls the position of the aside below the navbar. If `true`, the aside is displayed below the navbar; if `false`, it is displayed on the right side of the screen. |
+| `children`     	| Node     			| No       		 | n/a            | n/a     			 | Allows inserting custom content within the Aside.                                                            														 |
+| `className`    	| String   			| No       		 | n/a            | n/a     			 | Additional CSS class names that can be applied to the aside. Defaults to an empty string.                               												 |
+| `header`       	| String / Node     | Yes      		 | n/a            | n/a     			 | Allows inserting custom content within the Aside header.                                                            													 |
+| `onHide`       	| Function | No     | n/a            | n/a     		  | n/a     			 | Function to toggle the visibility state between visible and hidden.                                           														 |
+| `show`         	| Boolean  | No     | `true` `false` | `false` 		  | n/a     			 | Controls the visibility of the Aside. If `true`, the Aside is displayed; if `false`, it is hidden.        															 |
+
 ### Navbar
 
 ```jsx
@@ -928,14 +1114,182 @@ const NavbarComponent = () => {
 export default NavbarComponent;
 ```
 
-| Property       | Type     | Required | Options        | Default | Description                                                                                                   |
-| -------------- | -------- | -------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------- |
-| `children`     | Node     | No       | n/a            | n/a     | Allows inserting custom content within the Navbar.                                                            |
-| `logoUrl`      | String   | No       | n/a            | n/a     | Accepts a URL to customize the logo image. If empty, show the Groovinads logo.                                |
-| `setShow`      | Function | No       | n/a            | n/a     | Function to toggle the visibility state between visible and hidden.                                           |
-| `show`         | Boolean  | No       | `true` `false` | n/a     | Controls the visibility of the sidebar. If `true`, the sidebar is displayed; if `false`, it is hidden.        |
-| `showDeckMenu` | Boolean  | No       | `true` `false` | `false` | Controls the visibility of the deck menu in the navbar. If `true`, it is displayed; if `false`, it is hidden. |
-| `showUserMenu` | Boolean  | No       | `true` `false` | `false` | Controls the visibility of the user menu. If `true`, the user menu is shown; if `false`, it is hidden.        |
+| Property       	| Type     | Required | Options        | Default 			 | Description                                                                                                   			|
+| ----------------- | -------- | -------- | -------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `children`     	| Node     | No       | n/a            | n/a     			 | Allows inserting custom content within the Navbar.                                                            			|
+| `logoUrl`      	| String   | No       | n/a            | Groovinads logo     | Accepts a URL to customize the logo image. If empty, show the Groovinads logo.                                			|
+| `logoUrlMobile`	| String   | No       | n/a            | Groovinads logo     | Accepts a URL for the mobile version of the logo. If not provided, uses `logoUrl` on mobile devices.          			|
+| `setShow`      	| Function | No       | n/a            | n/a     			 | Function to toggle the visibility state between visible and hidden.                                           			|
+| `show`         	| Boolean  | No       | `true` `false` | n/a      			 | Controls the visibility of the sidebar. If `true`, the sidebar is displayed; if `false`, it is hidden.        			|
+| `showDeckMenu` 	| Boolean  | No       | `true` `false` | `false` 			 | Controls the visibility of the deck menu in the navbar. If `true`, it is displayed; if `false`, it is hidden. 			|
+| `showUserMenu` 	| Boolean  | No       | `true` `false` | `false` 			 | Controls the visibility of the user menu. If `true`, the user menu is shown; if `false`, it is hidden.        			|
+
+### Pagination
+
+```jsx
+import React from 'react';
+import { Pagination } from 'groovinads-ui';
+
+const PaginationComponent = () => {
+	return (
+		<div>
+			<Table className='table shadow-1'>
+				<thead>
+					<tr>
+						<th>ID</th>
+						<th>Name</th>
+						<th>Status</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>1</td>
+						<td>John Doe</td>
+						<td>Active</td>
+					</tr>
+					<tr>
+						<td>2</td>
+						<td>Jane Doe</td>
+						<td>Inactive</td>
+					</tr>
+					...
+				</tbody>
+			</Table>
+			<Pagination
+				{...args}
+				currentPage={currentPage}
+				totalPages={totalPages}
+				pageSize={pageSize}
+				onPageChange={handlePageChange}
+				onPageSizeChange={handlePageSizeChange}
+				onPrevPage={handlePrevPage}
+				onNextPage={handleNextPage}
+				pageSizeOptions={[10, 50, 100]}
+				showPerPageLabel='Show per page'
+			/>
+		</div>
+	);
+};
+
+export default PaginationComponent;
+```
+
+| Property       	| Type     | Required | Options       	 | Default 			   | Description                                              |
+| ----------------- | -------- | -------- | ---------------- | ------------------- | ---------------------------------------------------------|
+| `className`       | String   | No       | n/a            	 | n/a                 | Additional CSS class for the pagination.                 |
+| `currentPage`     | Number   | Yes      | n/a            	 | n/a                 | The current page number.                                 |
+| `pageSize`        | Number   | Yes      | n/a            	 | n/a                 | The number of items per page.                            |
+| `onPageChange`    | Function | Yes      | n/a            	 | n/a                 | The function to call when the page changes.              |
+| `onPageSizeChange`| Function | Yes      | n/a            	 | n/a                 | The function to call when the page size changes.         |
+| `onPrevPage`      | Function | Yes      | n/a            	 | n/a                 | The function to call when the previous page is clicked.  |
+| `onNextPage`      | Function | Yes      | n/a            	 | n/a                 | The function to call when the next page is clicked.      |
+| `pageSizeOptions` | Array    | No       | n/a           	 | [10, 50, 100]       | The options for the page size.                           |
+| `paginationMode`  | String   | No       | `local` `remote` | `local`             | The mode of pagination.                                  |
+| `showPerPageLabel`| String   | No       | n/a            	 | 'Show per page'     | The label for the page size.                             |
+| `totalPages`      | Number   | No       | n/a            	 | n/a                 | The total number of pages. It is used to disable the next page button when the `currentPage` is the last page. |
+
+#### Integration with Tabulator
+The table uses local pagination (`paginationMode: 'local'`).
+Pagination state is synchronized through Tabulator’s lifecycle events (`tableBuilt`, `pageLoaded`, `dataFiltered`, `dataSorted`).
+
+The synchronization flow works as follows:
+1.	When the table is mounted, the Tabulator instance is stored via a `ref` (`tableRef.current.table`).
+2.	Each time the user changes the page, page size, or applies a filter/sort, Tabulator triggers events (`tableBuilt`, `pageLoaded`, `dataFiltered`, `dataSorted`).
+3.	These events update the local state object:
+```jsx
+	{
+		currentPage: number,
+		totalPages: number,
+		pageSize: number,
+	}
+```
+4.	The external `Pagination` component receives this state and triggers callbacks (`onPageChange`, `onPrevPage`, `onNextPage`, `onPageSizeChange`) that invoke Tabulator methods such as `setPage()` or `setPageSize()`.
+
+##### Example
+
+```jsx
+import React, { useRef, useState, useEffect } from 'react';
+import { ReactTabulator } from 'react-tabulator';
+import { Pagination } from 'groovinads-ui';
+
+const MyReportTable = ({ data, allData, pageSize = 50 }) => {
+	const tableRef = useRef(null);
+	const [paginationState, setPaginationState] = useState({
+		currentPage: 1,
+		totalPages: 1,
+		pageSize,
+	});
+
+	const getTableInstance = () => tableRef.current?.table || null;
+
+  	const handlePageChange = (page) => getTableInstance()?.setPage(page);
+  	const handlePrevPage = () => getTableInstance()?.previousPage();
+	const handleNextPage = () => getTableInstance()?.nextPage();
+	const handlePageSizeChange = (size) => {
+		const table = getTableInstance();
+		if (table) {
+			table.setPageSize(size);
+			table.setPage(1);
+		}
+	};
+	const handlePageSizeChange = (size) => {
+    	const table = getTableInstance();
+    	if (table) {
+      		table.setPageSize(size);
+      		table.setPage(1);
+    	}
+  	};
+
+  	return (
+    	<div className='table-with-pagination'>
+			<ReactTabulator
+				onRef={(ref) => (tableRef.current = ref)}
+				data={allData || data}
+				columns={[{ title: 'ID', field: 'id' }, { title: 'Name', field: 'name' }]}
+				options={{
+					pagination: true,
+					paginationMode: 'local',
+					paginationSize: pageSize,
+					layout: 'fitColumns',
+				}}
+			events={{
+				tableBuilt: function () {
+					setPaginationState({
+					currentPage: this.getPage(),
+					totalPages: this.getPageMax(),
+					pageSize: this.getPageSize(),
+					});
+				},
+				pageLoaded: function () {
+					setPaginationState({
+						currentPage: this.getPage(),
+						totalPages: this.getPageMax(),
+						pageSize: this.getPageSize(),
+					});
+				},
+			}}
+		/>
+
+		<Pagination
+			currentPage={paginationState.currentPage}
+			totalPages={paginationState.totalPages}
+			pageSize={paginationState.pageSize}
+			onPageChange={handlePageChange}
+			onPrevPage={handlePrevPage}
+			onNextPage={handleNextPage}
+			onPageSizeChange={handlePageSizeChange}
+		/>
+    </div>
+  );
+};
+
+export default MyReportTable;
+```
+##### Notes & best practices
+- Use paginationMode: 'local' for immediate synchronization between Tabulator and the UI.
+- Clean up the table instance in a `useEffect` return function to prevent memory leaks.
+- Update `paginationState` after filtering or sorting, since Tabulator recalculates pagination internally.
+- The `Pagination` component should be fully controlled — avoid internal state handling.
 
 ### Sidebar
 
@@ -952,7 +1306,7 @@ const SidebarComponent = () => {
 
   const handleNavigation = (url) => {
     navigate(url);
-    console.log("Cliente seleccionado:", client);
+    console.log("Selected client:", client);
   };
 
   return (
@@ -1060,19 +1414,24 @@ export default SidebarComponent;
 
 ```
 
-| Property               | Type                 | Required | Options                 | Default     | Description                                                                                                                                                                                                                                                                                                                                                                                     |
-| ---------------------- | -------------------- | -------- | ----------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `api`                  | String               | No       | n/a                     | n/a         | It is the `url` corresponding to your `api`. From which you will receive the data, which will be used in the non-custom section.                                                                                                                                                                                                                                                                |
-| `customLinks`          | Array                | Yes      | n/a                     | n/a         | Creates the sections of the component based on the array of objects it receives. `title` names each section, and `links` is a section link item, that can optionally, contain an array of children for nested links. To use external data obtained from the `api` property, the object must contain the property `backData={true}`.                                                             |
-| `defaultOpened`        | Boolean              | No       | `true` `false`          | `false`     | Determines whether the sidebar is initially opened or closed.                                                                                                                                                                                                                                                                                                                                   |
-| `onNavigate`           | Function             | Yes      | n/a                     | n/a         | Allows handling navigation to the url of the link when an item in the sidebar is clicked. You should provide a function to define how the navigation should be handled (handleNavigation). In our environment, use React Router DOM for navigation.                                                                                                                                             |
-| `show`                 | Boolean              | No       | `true` `false`          | `false`     | Controls the visibility of the sidebar from an external state. If true, the sidebar is displayed; if false, it is hidden.                                                                                                                                                                                                                                                                       |
-| `showClients`          | Boolean String       | No       | `true` `false` `single` | `false`     | Controls the visibility of the DropdownClient. . Accepts true or false for visibility, or 'single' to show only one client.                                                                                                                                                                                                                                                                     |
-| `setGroovinProfile`    | Function             | No       | n/a                     | n/a         | Updates the user's profile when a client is selected, used in the `DropdownClients` subcomponent.                                                                                                                                                                                                                                                                                               |
-| `selectedClient`       | Object               | No       | n/a                     | n/a         | Represents the selected client object, used to display client-specific data in the sidebar.                                                                                                                                                                                                                                                                                                     |
-| `inModal`              | Boolean              | No       | `true` `false`          | `false`     | If inModal is true, it will adjust the Sidebar based on the size of its parent container, allowing flexibility in a specific context, for example, a modal or a different layout. If false, its behavior will depend on the screen size.                                                                                                                                                        |
-| `customURL`            | `string` `undefined` | No       | `string` `undefined`    | `undefined` | Allows you to define a custom URL. You can provide a specific URL or a value representing a selected item in the Sidebar. If not defined, its value will be `undefined` (and window.location.pathname will be used as the default).                                                                                                                                                             |
-| `pendingIndicatorType` | `string`             | No       | `warning` `badge`       | n/a         | If the value is 'warning', an icon (triangle-exclamation) will be displayed. If the value is 'badge', a number (badge) will be shown. For this functionality, you need to add a key in `customLinks.links` named `pendingIndicatorNumber`, which expects a number representing the length (if greater than `1`, the warning icon or badge will be shown; otherwise, nothing will be displayed). |
+| Property               | Type                 | Required | Options                 | Default     									| Description                                                                                                                                                                                                                                                                                                                                                                                     |
+| ---------------------- | -------------------- | -------- | ----------------------- | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `api`                  | String               | No       | n/a                     | n/a         									| It is the `url` corresponding to your `api`. From which you will receive the data, which will be used in the non-custom section.                                                                                                                                                                                                                                                                |
+| `clientLogoUrl`        | String               | No       | n/a                     | n/a         									| It is the `url` of the client logo. It is displayed in the sidebar when the `showClients` property is set to `single` or a small version in the `DropdownClient` component.                                                                                                                                                                                                                       |
+| `clientNotFoundTitle`  | String               | No       | n/a                     | "Client not found"							| The title of the client not found message. It is displayed when the client is not found.                                                                                                                                                                                                                                                                                                        |
+| `clientNotFoundText`   | String               | No       | n/a                     | "It looks like this client does not exist." 	| The text of the client not found message.                                                                                                                                                                                                                                                                                                                                                		  |
+| `clientSearchLabel`    | String               | No       | n/a                     | "Search client" 								| The label of the search input.                                                                                                                                                                                                                                                                                                                                                              	  |
+| `customLinks`          | Array                | Yes      | n/a                     | n/a         									| Creates the sections of the component based on the array of objects it receives. `title` names each section, and `links` is a section link item, that can optionally, contain an array of children for nested links. To use external data obtained from the `api` property, the object must contain the property `backData={true}`.                                                             |
+| `customURL`            | String 				| No       | n/a 	 	 			 | `undefined` 									| Allows you to define a custom URL. You can provide a specific URL or a value representing a selected item in the Sidebar. If not defined, its value will be `undefined` (and window.location.pathname will be used as the default).                                                                                                                                                             |
+| `defaultOpened`        | Boolean              | No       | `true` `false`          | `false`     									| Determines whether the sidebar is initially opened or closed.                                                                                                                                                                                                                                                                                                                                   |
+| `inModal`              | Boolean              | No       | `true` `false`          | `false`     									| If inModal is true, it will adjust the Sidebar based on the size of its parent container, allowing flexibility in a specific context, for example, a modal or a different layout. If false, its behavior will depend on the screen size.                                                                                                                                                        |
+| `onNavigate`           | Function             | Yes      | n/a                     | n/a         									| Allows handling navigation to the url of the link when an item in the sidebar is clicked. You should provide a function to define how the navigation should be handled (handleNavigation). In our environment, use React Router DOM for navigation.                                                                                                                                             |
+| `pendingIndicatorType` | String         	    | No       | `warning` `badge`       | n/a         									| If the value is `warning`, an icon (triangle-exclamation) will be displayed. If the value is `badge`, a number (badge) will be shown. For this functionality, you need to add a key in `customLinks.links` named `pendingIndicatorNumber`, which expects a number representing the length (if greater than `1`, the warning icon or badge will be shown; otherwise, nothing will be displayed). |
+| `selectedClient`       | Object               | No       | n/a                     | n/a         									| Represents the selected client object, used to display client-specific data in the sidebar.                                                                                                                                                                                                                                                                                                     |
+| `setGroovinProfile`    | Function             | No       | n/a                     | n/a         									| Updates the user's profile when a client is selected, used in the `DropdownClients` subcomponent.                                                                                                                                                                                                                                                                                               |
+| `setShow`              | Function             | No       | n/a                     | n/a         									| Allows controlling the visibility of the sidebar from an external state. If `true`, the sidebar is displayed; if `false`, it is hidden.                                                                                                                                                                                                                                                         |
+| `show`                 | Boolean              | No       | `true` `false`          | `false`     									| Controls the visibility of the sidebar from an external state. If `true`, the sidebar is displayed; if `false`, it is hidden.                                                                                                                                                                                                                                                                   |
+| `showClients`          | Boolean / String     | No       | `true` `false` `single` | `false`     									| Controls the visibility of the DropdownClient. Accepts `true` or `false` for visibility, or 'single' to show only one client.                                                                                                                                                                                                                                                                   |
 
 ### Stepper
 
@@ -1089,10 +1448,32 @@ const StepperComponent = () => {
 export default StepperComponent;
 ```
 
-| Property  | Type   | Required | Options | Default | Description                                                                                                                                   |
-| --------- | ------ | -------- | ------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
-| `current` | Number | Yes      | n/a     | n/a     | Uses a number to specify the index in the list array, determining which step is highlighted as the current one and applying a specific style. |
-| `list`    | Array  | Yes      | n/a     | n/a     | Array of steps to be displayed in the stepper. Each item represents a step.                                                                   |
+| Property  	| Type   | Required | Options 					| Default 		| Description                                                                                                                                   |
+| ------------- | ------ | -------- | ------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className` 	| String | No       | n/a    					| n/a     		| Additional CSS class for the stepper.                                                                                                       	|
+| `current` 	| Number | Yes      | n/a     					| n/a     		| Uses a number to specify the index in the list array, determining which step is highlighted as the current one and applying a specific style. |
+| `orientation` | String | No       | `horizontal` `vertical` 	| `horizontal` 	| The orientation of the stepper.                                                                                                            	|
+| `list`    	| Array  | Yes      | n/a     					| n/a     		| Array of steps to be displayed in the stepper. Each item represents a step.                                                                   |
+
+
+### TableSkeleton
+
+```jsx
+import React from 'react';
+import { TableSkeleton } from 'groovinads-ui';
+
+const TableSkeletonComponent = () => {
+	return <TableSkeleton rows={5} cols={4} />;
+};
+
+export default TableSkeletonComponent;
+```
+
+| Property  	| Type   | Required | Options 					| Default 		| Description                                                                                                                                   |
+| ------------- | ------ | -------- | ------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className` 	| String | No       | n/a    					| n/a     		| Additional CSS class for the table skeleton.                                                                                                  |
+| `rows`    	| Number | Yes      | n/a     					| n/a     		| Number of rows to display in the table skeleton.                                                                   							|
+| `cols`    	| Number | Yes      | n/a     					| n/a     		| Number of columns to display in the table skeleton.                                                         									|
 
 ### Tabnav
 
@@ -1138,7 +1519,10 @@ export default TabnavComponent;
 | Property       | Type     | Required | Options        | Default | Description                                                                                                                                                                                                                   |
 | -------------- | -------- | -------- | -------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `activeTab`    | Number   | No       | n/a            | `1`     | Displays the active tab. By default, it is set to 1. You can use it alone to define the active tab or in combination with `setActiveTab` to manage external state and customize the initial active tab by providing a number. |
-| `navigateTab`  | Boolean  | No       | `true` `false` | `true`  | If `true`, it enables navigation to the specified URL when the tab is selected.                                                                                                                                               |
+| `className`    | String   | No       | n/a            | n/a     | Additional CSS class for the tabnav.                                                                                                                                                                                          |
+| `disabledTabs` | Array    | No       | n/a            | []      | Array of numbers representing the tabs to be disabled.                                                                                                                                                                        |
+| `navigateTab`  | Boolean  | No       | `true` `false` | `false` | If `true`, it enables navigation to the specified URL when the tab is selected.                                                                                                                                               |
+| `onNavigate`   | Function | No       | n/a            | n/a     | Allows handling navigation to the url of the link when an item in the sidebar is clicked. You should provide a function to define how the navigation should be handled (handleNavigation). In our environment, use React Router DOM for navigation. |
 | `setActiveTab` | Function | No       | n/a            | n/a     | Allows the component to be managed through external state. If provided, Tabnav will update the active tab using this property.                                                                                                |
 | `tabs`         | Array    | Yes      | n/a            | [ ]     | Each array of objects represents tabs. Each object must have a `tab` key and may have `badgeNumber`, `url`, and `warningIcon` keys.                                                                                           |
 
@@ -1174,15 +1558,22 @@ const ToastExample = () => {
 export default ToastExample;
 ```
 
-| Property | Type | Required | Options | Default | Description |
-| Propiedad | Tipo | Requerido | Valores Permitidos | Valor Predeterminado | Descripción |
-| ----------- | ------- | --------- | ------------------------------------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| `position` | String | No | `top-start` `top-end` `bottom-start` `bottom-end` | `bottom-end` | Define la posición en la pantalla donde se mostrará el toast. |
-| `toast` | Object | No | n/a | n/a | Objeto que contiene las propiedades del toast. |
-| `toast.autoClose` | Boolean | No | `true` `false` | `true` | Si es `true`, se cierra automáticamente después de un cierto tiempo. Si es `false`, permanece en la pantalla hasta que el usuario lo cierre manualmente. |
-| `toast.children` | Node | No | n/a | n/a | Contenido personalizado dentro del toast. |
-| `toast.className` | String | No | n/a | n/a | Nombre de clase personalizado para el toast. |
-| `toast.variant` | String | No | `info` `success` `warning` `error` | `info` | Define el tipo de mensaje que se mostrará. Dependiendo del valor, se muestra un icono diferente asociado con cada tipo de mensaje. |
+| Property 			| Type 		| Required 	| Options 											| Default 		| Description 																																|
+| ----------------- | --------- | --------- | ------------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `className` 		| String 	| No 		| n/a 												| n/a 			| Additional CSS class for the toast component. 																							|
+| `position` 		| String 	| No 		| `top-start` `top-end` `bottom-start` `bottom-end` | `bottom-end` 	| Define the position on the screen where the toast will be displayed. 																		|
+| `toast` 			| Object 	| No 		| n/a 												| n/a 			| The ToastComponent accepts a single object containing all its properties. This approach allows the entire configuration to be stored in a unified state or context, instead of managing multiple variables or separate states. Internally, ToastComponent keeps a history of notifications (toasts), making it essential to handle its configuration as an object rather than as individual variables. |
+
+#### Toast object {}
+As described above, the ToastComponent receives an object containing all of its properties. These properties are listed below. Note that the state or variable holding this object does not need to be explicitly named `toast`; what really matters are the keys defined inside it.
+
+| Property 			| Type 		| Required 	| Options 											| Default 		| Description 																																|
+| ----------------- | --------- | --------- | ------------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `toast.autoClose` | Boolean 	| No 		| `true` `false` 									| `true` 		| If `true`, it closes automatically after a certain amount of time. If `false`, it remains on the screen until the user closes it manually.|
+| `toast.children` 	| String 	| No 		| n/a 												| n/a 			| Custom content within the toast. It must be a string. In case of needing to use HTML tags, it must be send as a string.					|
+| `toast.className` | String 	| No 		| n/a 												| n/a 			| Custom class name for the toast.																											|
+| `toast.position` 	| String 	| No 		| `top-start` `top-end` `bottom-start` `bottom-end` | `bottom-end` 	| Define the position on the screen where the toast will be displayed. 																		|
+| `toast.variant` 	| String 	| No 		| `info` `success` `warning` `error` 				| `info` 		| Defines the type of message to display. Depending on the value, a different icon is displayed for each message type.						|
 
 ### ToastProgress
 
@@ -1227,6 +1618,7 @@ export default MyToastExamples;
 | Property          | Type     | Required | Options                                           | Default        | Description                                                                                                                                                                           |
 | ----------------- | -------- | -------- | ------------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `cancelButton`    | Boolean  | No       | `true` `false`                                    | `false`        | Determines whether to show a cancel button.                                                                                                                                           |
+| `className`       | String   | No       | n/a                                               | n/a            | Additional CSS class for the toast progress component.                                                                                                                                |
 | `currentProgress` | Number   | No       | n/a                                               | n/a            | Indicates the current progress of the task as a percentage with a number from 1 to 100. Used only when `variant` is set to `upload`                                                   |
 | `onCancel`        | Function | No       | n/a                                               | n/a            | If `cancelButton` is true, it will display a cancel button that will execute the function provided in the `onCancel` prop when clicked.                                               |
 | `position`        | String   | No       | `top-start` `top-end` `bottom-start` `bottom-end` | `bottom-start` | Defines the position on the screen where the toast will be displayed.                                                                                                                 |