groovinads-ui 2.0.0 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +369 -10
  2. package/dist/index.es.js +1 -1
  3. package/dist/index.js +1 -1
  4. package/index.d.ts +74 -1
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -32,9 +32,11 @@ The library includes the following components:
32
32
  - [Input](#input): For user data entry.
33
33
  - [InputChip](#inputChip): For dynamically managing and displaying keywords.
34
34
  - [InputEmail](#inputEmail): For managing email lists.
35
+ - [MultiValueInput](#multivalueinput): For adding multiple values via paste or one-by-one entry.
35
36
  - [Radio](#radio): For exclusive selections.
36
37
  - [Slider](#slider): For selecting values using a slider control.
37
38
  - [Switch](#switch): For toggle states.
39
+ - [TemplateInput](#templateinput): For building message templates with text and variable pills.
38
40
  - [Textarea](#textarea): For multiline text input.
39
41
 
40
42
  - [Labels](#labels):
@@ -56,6 +58,7 @@ The library includes the following components:
56
58
  - [Accordion](#accordion): For collapsible content sections.
57
59
  - [Aside](#aside): For displaying aside panels.
58
60
  - [Navbar](#navbar): For top navigation bars.
61
+ - [PageHeader](#pageheader): For page detail headers with breadcrumbs, title, actions, and custom content.
59
62
  - [Pagination](#pagination): For pagination of tables.
60
63
  - [Sidebar](#sidebar): For side navigation bars.
61
64
  - [Stepper](#stepper): For step-by-step navigation.
@@ -280,11 +283,11 @@ function ThemeSelector() {
280
283
 
281
284
  | Property | Type | Description |
282
285
  |----------|------|-------------|
283
- | `theme` | `'light' \| 'dark' \| 'default'` | Current active theme |
284
- | `setTheme` | `(theme: ThemeMode) => void` | Function to change theme |
285
- | `isLight` | `boolean` | `true` if theme is `'light'` |
286
286
  | `isDark` | `boolean` | `true` if theme is `'dark'` |
287
287
  | `isDefault` | `boolean` | `true` if theme is `'default'` |
288
+ | `isLight` | `boolean` | `true` if theme is `'light'` |
289
+ | `setTheme` | `(theme: ThemeMode) => void` | Function to change theme |
290
+ | `theme` | `'light' \| 'dark' \| 'default'` | Current active theme |
288
291
 
289
292
  #### Implementation Notes
290
293
 
@@ -878,6 +881,7 @@ export default InputComponent;
878
881
  | `maxLength` | Number | No | n/a | n/a | Specifies the maximum number of characters that the input field can accept. |
879
882
  | `min` | Number | No | n/a | n/a | Specifies the minimum value that the input field can accept. |
880
883
  | `name` | String | No | n/a | n/a | Indicates the name attribute for the input element, which represents the form data after it is submitted. |
884
+ | `onBlur` | Function | No | n/a | n/a | Callback function triggered when the input loses focus. |
881
885
  | `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. |
882
886
  | `prefix` | String | No | n/a | n/a | Text or characters to display at the start of the input, e.g., 'USD' for currency. |
883
887
  | `requiredText` | String | No | n/a | n/a | Text displayed when input validation fails, used to indicate an error. |
@@ -949,6 +953,199 @@ export default ExampleInputChip;
949
953
  | `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. |
950
954
  | `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. |
951
955
  | `showError` | Boolean | No | `true` `false` | `false` | When true, activates the error state (adds 'not-validated' class) to the input chip. Works in combination with `errorText` to display custom validation errors. The error state will automatically dismiss after 3000ms. |
956
+ | `size` | String | No | `sm` `md` `lg` | `md` | Controls the size of the input. Applies `input-chip-{size}` classes for small, medium, or large sizing. |
957
+
958
+ ### MultiValueInput
959
+
960
+ ```jsx
961
+ import React, { useState } from 'react';
962
+ import { MultiValueInput } from 'groovinads-ui';
963
+
964
+ const ExampleMultiValueInput = () => {
965
+ const [values, setValues] = useState(['SKU-001', 'SKU-002', 'SKU-003']);
966
+
967
+ return (
968
+ <>
969
+ {/* WITH LABEL AND HELP TEXT */}
970
+ <MultiValueInput
971
+ value={values}
972
+ onChange={setValues}
973
+ label='Product IDs'
974
+ helpText='Paste values from Excel or CSV. Accepted separators: comma, semicolon, tab, newline.'
975
+ />
976
+
977
+ {/* EMPTY, WITH ERROR STATE */}
978
+ <MultiValueInput
979
+ value={[]}
980
+ onChange={(newValues) => console.log(newValues)}
981
+ label='Add values'
982
+ showError={true}
983
+ errorText='At least one value is required'
984
+ pillColor='blue'
985
+ />
986
+ </>
987
+ );
988
+ };
989
+
990
+ export default ExampleMultiValueInput;
991
+
992
+ ```
993
+
994
+ | Property | Type | Required | Options | Default | Description |
995
+ | ----------- | -------- | -------- | ------------------------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
996
+ | `className` | String | No | n/a | `''` | Additional CSS class names applied to the container. |
997
+ | `disabled` | Boolean | No | `true` `false` | `false` | If `true`, disables the input and prevents chip removal. |
998
+ | `errorText` | String | No | n/a | n/a | Error message displayed when `showError` is `true`. Rendered via the `data-error` attribute. Automatically dismisses after 3000ms. |
999
+ | `helpText` | String | No | n/a | n/a | Help text displayed below the input field. |
1000
+ | `label` | String | No | n/a | `'Input label'` | Floating label text displayed over the input (Bootstrap floating label pattern, same as Input component). Also used as the input placeholder. |
1001
+ | `onChange` | Function | No | n/a | n/a | Callback fired with the updated array of string values whenever values are added or removed. |
1002
+ | `pillColor` | String | No | `blue` `danger` `dark` `green` `light` `midtone` `neutral` `red` `yellow` | `'neutral'` | Color of the chip/pill elements. |
1003
+ | `showError` | Boolean | No | `true` `false` | `false` | When `true`, activates the error state (adds 'not-validated' class). Works in combination with `errorText`. The error state automatically dismisses after 3000ms. |
1004
+ | `size` | String | No | `sm` `md` `lg` | `md` | Controls the size of the input. Applies `input-chip-{size}` classes for small, medium, or large sizing. |
1005
+ | `value` | Array | No | n/a | `[]` | Array of current string values. The component is controlled: provide this prop along with `onChange`. |
1006
+
1007
+ ### TemplateInput
1008
+
1009
+ A powerful template editor that combines free-form text with variable pills. Variables can be inserted in **3 ways**: (1) typing macros like `{{Name}}`, (2) pasting text containing macros, or (3) selecting from an external dropdown. Ideal for building message templates, email templates, notification messages, or any dynamic text content.
1010
+
1011
+ ```jsx
1012
+ import React, { useState, useRef } from 'react';
1013
+ import { TemplateInput } from 'groovinads-ui';
1014
+ import { DropdownMultiSelect } from 'groovinads-ui';
1015
+
1016
+ const ExampleTemplateInput = () => {
1017
+ // Segments model: ordered array of mixed text and pill content
1018
+ const [segments, setSegments] = useState([
1019
+ { type: 'text', value: 'Hello ' },
1020
+ { type: 'pill', id: 'customer_name', label: 'Customer Name' },
1021
+ { type: 'text', value: ', your order ' },
1022
+ { type: 'pill', id: 'order_id', label: 'Order ID' },
1023
+ { type: 'text', value: ' is ready.' },
1024
+ ]);
1025
+
1026
+ // For external dropdown integration
1027
+ const templateRef = useRef();
1028
+ const [showDropdown, setShowDropdown] = useState(false);
1029
+ const [selectedVars, setSelectedVars] = useState([]);
1030
+
1031
+ const variables = [
1032
+ { id: 'customer_name', name: 'Customer Name' },
1033
+ { id: 'order_id', name: 'Order ID' },
1034
+ { id: 'delivery_date', name: 'Delivery Date' },
1035
+ ];
1036
+
1037
+ const handleInsertVariable = () => {
1038
+ if (selectedVars.length > 0 && templateRef.current) {
1039
+ selectedVars.forEach((variable) => {
1040
+ templateRef.current.insertPill({
1041
+ id: variable.id,
1042
+ label: variable.name,
1043
+ });
1044
+ });
1045
+ setSelectedVars([]);
1046
+ }
1047
+ };
1048
+
1049
+ return (
1050
+ <>
1051
+ {/* Method 1: Basic usage with macro typing and paste */}
1052
+ <TemplateInput
1053
+ segments={segments}
1054
+ onChange={setSegments}
1055
+ label='Order confirmation template'
1056
+ helpText='Type text freely or use {{VariableName}} to insert variables'
1057
+ pillColor='blue'
1058
+ />
1059
+
1060
+ {/* Method 2: Integration with external dropdown */}
1061
+ <TemplateInput
1062
+ ref={templateRef}
1063
+ segments={segments}
1064
+ onChange={setSegments}
1065
+ label='Template with dropdown'
1066
+ />
1067
+ <DropdownMultiSelect
1068
+ label='Insert variables'
1069
+ values={variables}
1070
+ valuesSelected={selectedVars}
1071
+ setValuesSelected={setSelectedVars}
1072
+ show={showDropdown}
1073
+ setShow={setShowDropdown}
1074
+ object={true}
1075
+ idKey='id'
1076
+ nameKey='name'
1077
+ />
1078
+ <button onClick={handleInsertVariable}>Insert Selected</button>
1079
+
1080
+ {/* With error state */}
1081
+ <TemplateInput
1082
+ segments={[]}
1083
+ onChange={setSegments}
1084
+ label='Required template'
1085
+ showError={true}
1086
+ errorText='Template cannot be empty'
1087
+ />
1088
+
1089
+ {/* Disabled state */}
1090
+ <TemplateInput
1091
+ segments={segments}
1092
+ onChange={setSegments}
1093
+ label='Locked template'
1094
+ disabled={true}
1095
+ />
1096
+ </>
1097
+ );
1098
+ };
1099
+
1100
+ export default ExampleTemplateInput;
1101
+ ```
1102
+
1103
+ #### 3 Methods to Insert Variables
1104
+
1105
+ 1. **Type macros**: Type `{{VariableName}}` directly. When you close the `}}`, it auto-converts to a pill.
1106
+ 2. **Paste templates**: Paste text like `"Hello {{Name}}, order {{ID}} ready"` and all `{{...}}` patterns convert to pills automatically.
1107
+ 3. **External dropdown**: Use `ref.insertPill({ id, label })` to programmatically insert pills from a parent component (e.g., via `DropdownMultiSelect`).
1108
+
1109
+ #### Segments Data Model
1110
+
1111
+ The component uses a **segments** array to represent mixed content:
1112
+
1113
+ ```javascript
1114
+ const segments = [
1115
+ { type: 'text', value: 'Hello ' },
1116
+ { type: 'pill', id: 'name', label: 'Name' },
1117
+ { type: 'text', value: '!' },
1118
+ ];
1119
+ ```
1120
+
1121
+ - **Text segments**: `{ type: 'text', value: 'string' }`
1122
+ - **Pill segments**: `{ type: 'pill', id: 'string', label: 'string' }`
1123
+
1124
+ #### Helper Function: segmentsToTemplateString
1125
+
1126
+ Convert segments back to template string format:
1127
+
1128
+ ```javascript
1129
+ import { segmentsToTemplateString } from 'groovinads-ui';
1130
+
1131
+ const templateString = segmentsToTemplateString(segments);
1132
+ // Result: "Hello {{Name}}!"
1133
+ ```
1134
+
1135
+ | Property | Type | Required | Options | Default | Description |
1136
+ | ------------- | -------- | -------- | ------------------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
1137
+ | `className` | String | No | n/a | `''` | Additional CSS class names applied to the container. |
1138
+ | `disabled` | Boolean | No | `true` `false` | `false` | If `true`, disables editing and pill removal. The template becomes read-only. |
1139
+ | `errorText` | String | No | n/a | n/a | Error message displayed when `showError` is `true`. Rendered via the `data-error` attribute. |
1140
+ | `helpText` | String | No | n/a | n/a | Help text displayed below the input field to guide users. |
1141
+ | `label` | String | No | n/a | `'Template'` | Floating label text displayed over the input (Bootstrap floating label pattern). |
1142
+ | `onChange` | Function | Yes | n/a | n/a | Callback fired with the updated segments array whenever content changes (typing, pasting, or programmatic insertion). |
1143
+ | `pillColor` | String | No | `blue` `danger` `dark` `green` `light` `midtone` `neutral` `red` `yellow` | `'neutral'` | Color applied to all pills in the template. |
1144
+ | `placeholder` | String | No | n/a | n/a | Placeholder text shown when segments is empty. Defaults to `label` if not provided. |
1145
+ | `ref` | Ref | No | n/a | n/a | Forward ref exposing `insertPill({ id, label })` for programmatic pill insertion and `focus()` to focus the editor. |
1146
+ | `segments` | Array | Yes | n/a | n/a | Array of segment objects. Each segment has `type` ('text' or 'pill'). Text segments have `value`, pill segments have `id` and `label`. |
1147
+ | `showError` | Boolean | No | `true` `false` | `false` | When `true`, activates the error state (adds 'not-validated' class). Works with `errorText`. Automatically dismisses after 3000ms. |
1148
+ | `size` | String | No | `sm` `md` `lg` | `'md'` | Controls the size of the input. Applies `input-chip-{size}` classes for small, medium, or large sizing. |
952
1149
 
953
1150
  ### InputEmail
954
1151
 
@@ -1202,8 +1399,8 @@ import { Radio } from 'groovinads-ui';
1202
1399
  | `children` | Node | Yes | n/a | n/a | Content to be displayed inside the radio button. |
1203
1400
  | `className` | String | No | n/a | n/a | Additional CSS class names that can be applied to the radio button. |
1204
1401
  | `disabled` | Boolean | No | `true` `false` | `false` | If `true`, disables the radio button. If `false`, the radio button is enabled. |
1205
- | `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. |
1206
1402
  | `fullWidth` | Boolean | No | `true` `false` | `false` | If `true`, the radio button will take the full width of its container. |
1403
+ | `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. |
1207
1404
  | `name` | String | No | n/a | n/a | The name attribute of the radio button. Used to group multiple radios into a single group. |
1208
1405
  | `setStatus` | Function | No | n/a | n/a | It is used to update the selection state of the radio button based on user interaction. |
1209
1406
  | `size` | String | No | `sm` `md` `lg` | `md` | Sets the size of the radio button. |
@@ -1647,8 +1844,8 @@ import { ModalComponent } from 'groovinads-ui';
1647
1844
 
1648
1845
  | Property | Type | Required | Options | Default | Description |
1649
1846
  | ------------------ | ----------------- | -------- | --------------------------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1650
- | `className` | String | No | n/a | n/a | Allows adding custom CSS classes to the Modal. |
1651
1847
  | `children` | Node | Yes | n/a | n/a | Allows inserting custom content within the Modal. |
1848
+ | `className` | String | No | n/a | n/a | Allows adding custom CSS classes to the Modal. |
1652
1849
  | `footer` | Node | No | n/a | n/a | Allows inserting custom content within the Modal footer. If not provided, the footer is not displayed. |
1653
1850
  | `header` | String / Node | Yes | n/a | n/a | Allows inserting custom content within the Modal header. |
1654
1851
  | `onBeforeClose` | Function | No | n/a | n/a | Callback function called before closing the modal (on backdrop click, ESC key, or X button). Useful for showing confirmation dialogs before closing. When provided, the modal won't close automatically - you control when to close it. |
@@ -1754,11 +1951,11 @@ const AdvancedAccordion = () => {
1754
1951
 
1755
1952
  | Property | Type | Required | Options | Default | Description |
1756
1953
  | --------------- | ------- | -------- | ------------- | ------- | ---------------------------------------------------------------------------- |
1757
- | `eventKey` | String | Yes | n/a | n/a | Unique identifier for this accordion item. Used to control which item is open. |
1758
1954
  | `children` | Node | Yes | n/a | n/a | Content to display in the accordion body when the item is expanded. |
1955
+ | `className` | String | No | n/a | `''` | Additional CSS classes to apply to this specific accordion item. |
1956
+ | `eventKey` | String | Yes | n/a | n/a | Unique identifier for this accordion item. Used to control which item is open. |
1759
1957
  | `header` | Node | Yes | n/a | n/a | Content to display in the accordion header. Can be text, JSX, or complex components. |
1760
1958
  | `isCollapsible` | Boolean | No | `true` `false`| `true` | Controls whether this specific accordion item can collapse. If `false`, the caret icon is hidden and children content is not rendered for this item. |
1761
- | `className` | String | No | n/a | `''` | Additional CSS classes to apply to this specific accordion item. |
1762
1959
 
1763
1960
  **Controlled Mode Example:**
1764
1961
 
@@ -1987,6 +2184,168 @@ const NavbarComponent = () => {
1987
2184
 
1988
2185
  **Note:** If you don't provide these handlers, the component uses default behavior (opens in new tab for clicks, makes internal API call for favorites).
1989
2186
 
2187
+ ### PageHeader
2188
+
2189
+ PageHeader is a flexible and composable component for page detail headers. It includes breadcrumb navigation, editable/static titles, description text, action buttons area, and a custom content slot.
2190
+
2191
+ **Note:** PageHeader uses `Row` and `Col` from `react-bootstrap` for responsive layout, and `Skeleton` from `react-loading-skeleton` for loading states. These are peer dependencies of the library and must be installed in your project.
2192
+
2193
+ #### Basic Usage
2194
+
2195
+ ```jsx
2196
+ import React from 'react';
2197
+ import { PageHeader } from 'groovinads-ui';
2198
+
2199
+ const MyPage = () => {
2200
+ return (
2201
+ <PageHeader
2202
+ title="My Page Title"
2203
+ description="Page description or category"
2204
+ />
2205
+ );
2206
+ };
2207
+ ```
2208
+
2209
+ #### With Breadcrumbs
2210
+
2211
+ ```jsx
2212
+ <PageHeader
2213
+ breadcrumbs={[
2214
+ { icon: 'arrow-left', to: '/' },
2215
+ { label: 'Reports', to: '/reports' },
2216
+ { label: 'Report #123' } // last item without "to" (current page)
2217
+ ]}
2218
+ title="Report #123"
2219
+ description="Sales Report"
2220
+ />
2221
+ ```
2222
+
2223
+ #### With Editable Title
2224
+
2225
+ ```jsx
2226
+ const [reportName, setReportName] = useState('Q4 Sales Report');
2227
+
2228
+ <PageHeader
2229
+ breadcrumbs={[
2230
+ { icon: 'arrow-left', to: '/' },
2231
+ { label: 'My Reports' }
2232
+ ]}
2233
+ title={reportName}
2234
+ description="Marketing Analytics"
2235
+ editable={true}
2236
+ onTitleChange={(newValue) => setReportName(newValue)}
2237
+ onTitleSave={async (newValue) => {
2238
+ await api.updateReport({ name: newValue });
2239
+ }}
2240
+ />
2241
+ ```
2242
+
2243
+ #### With Actions
2244
+
2245
+ ```jsx
2246
+ import { Button, ButtonGroup, DropdownComponent } from 'groovinads-ui';
2247
+
2248
+ <PageHeader
2249
+ title="Report Dashboard"
2250
+ description="Analytics"
2251
+ actions={
2252
+ <>
2253
+ <Button variant='terciary' startIcon='share'>
2254
+ Share
2255
+ </Button>
2256
+ <ButtonGroup>
2257
+ <Button variant='primary'>
2258
+ Save report
2259
+ </Button>
2260
+ <DropdownComponent
2261
+ variant='primary'
2262
+ icon='angle-down'
2263
+ className='dropdown-toggle-split'
2264
+ >
2265
+ {/* Dropdown items */}
2266
+ </DropdownComponent>
2267
+ </ButtonGroup>
2268
+ </>
2269
+ }
2270
+ />
2271
+ ```
2272
+
2273
+ #### With Custom HTML (Filters)
2274
+
2275
+ ```jsx
2276
+ import { Alert } from 'groovinads-ui';
2277
+
2278
+ <PageHeader
2279
+ title="Analytics Dashboard"
2280
+ description="Custom Reports"
2281
+ customHTML={
2282
+ <>
2283
+ <div className='card shadow-1'>
2284
+ <div className='d-flex flex-column flex-md-row justify-content-between gap-3'>
2285
+ <div className='filter-wrapper'>
2286
+ <ClientsFilter />
2287
+ <DateFilters />
2288
+ </div>
2289
+ <Button variant='secondary' startIcon='sliders'>
2290
+ Customize
2291
+ </Button>
2292
+ </div>
2293
+ </div>
2294
+ <Alert type='warning' size='sm' className='mt-4 mb-0'>
2295
+ We're only showing a part of the data. Download the full report.
2296
+ </Alert>
2297
+ </>
2298
+ }
2299
+ />
2300
+ ```
2301
+
2302
+ #### With Loading State
2303
+
2304
+ ```jsx
2305
+ <PageHeader
2306
+ title={reportName}
2307
+ description={category}
2308
+ loading={true} // Shows skeletons
2309
+ />
2310
+ ```
2311
+
2312
+ #### With Back Button
2313
+
2314
+ ```jsx
2315
+ import { useNavigate } from 'react-router-dom';
2316
+
2317
+ const ReportDetailPage = () => {
2318
+ const navigate = useNavigate();
2319
+
2320
+ return (
2321
+ <PageHeader
2322
+ title="Report Details"
2323
+ description="View and edit report information"
2324
+ backButton={true}
2325
+ onBackClick={() => navigate(-1)} // Go back to previous page
2326
+ />
2327
+ );
2328
+ };
2329
+ ```
2330
+
2331
+ #### Props
2332
+
2333
+ | Property | Type | Required | Default | Description |
2334
+ | -------- | ---- | -------- | ------- | ----------- |
2335
+ | `actions` | Node | No | `undefined` | ReactNode for action buttons area (right side on desktop, below on mobile). |
2336
+ | `backButton` | Boolean | No | `false` | If `true`, displays a back button with arrow-left icon next to the title. |
2337
+ | `breadcrumbs` | Array | No | `undefined` | Array of breadcrumb items. Each item: `{ label?: string, to?: string, icon?: string }`. The `to` prop is optional - items without it will render as plain text. |
2338
+ | `className` | String | No | `''` | Additional CSS classes for the container. |
2339
+ | `customHTML` | Node | No | `undefined` | Fully flexible ReactNode/Fragment for custom content at the bottom (filters, cards, alerts, etc.). |
2340
+ | `description` | Node | No | `undefined` | Description or category text displayed below title. |
2341
+ | `editable` | Boolean | No | `false` | If `true`, title becomes editable using EditableContent component. |
2342
+ | `linkComponent` | ElementType | No | `'a'` | Component to use for breadcrumb links. Defaults to `'a'` for standard HTML links. Pass React Router's `Link` or Next.js `Link` for client-side routing. |
2343
+ | `loading` | Boolean | No | `false` | If `true`, shows Skeleton loaders for title and description. |
2344
+ | `onBackClick` | Function | No | `undefined` | Callback function triggered when back button is clicked. Required when `backButton={true}`. |
2345
+ | `onTitleChange` | Function | No | `undefined` | Callback when title is being edited. Receives new value as parameter. |
2346
+ | `onTitleSave` | Function | No | `undefined` | Async callback when title is saved. Must return a Promise. |
2347
+ | `title` | Node | Yes | n/a | Page title (string or ReactNode). |
2348
+
1990
2349
  ### Pagination
1991
2350
 
1992
2351
  ```jsx
@@ -2042,10 +2401,10 @@ export default PaginationComponent;
2042
2401
  | `className` | String | No | n/a | n/a | Additional CSS class for the pagination. |
2043
2402
  | `currentPage` | Number | Yes | n/a | n/a | The current page number. |
2044
2403
  | `locale` | String | No | n/a | `undefined` (browser default) | Locale string for number formatting (e.g., 'es-ES', 'en-US'). When not specified, uses browser's default locale. |
2404
+ | `onNextPage` | Function | Yes | n/a | n/a | The function to call when the next page is clicked. |
2045
2405
  | `onPageChange` | Function | Yes | n/a | n/a | The function to call when the page changes. |
2046
2406
  | `onPageSizeChange`| Function | Yes | n/a | n/a | The function to call when the page size changes. |
2047
2407
  | `onPrevPage` | Function | Yes | n/a | n/a | The function to call when the previous page is clicked. |
2048
- | `onNextPage` | Function | Yes | n/a | n/a | The function to call when the next page is clicked. |
2049
2408
  | `pageSize` | Number | Yes | n/a | n/a | The number of items per page. |
2050
2409
  | `pageSizeOptions` | Array | No | n/a | [10, 50, 100] | The options for the page size. |
2051
2410
  | `paginationMode` | String | No | `local` `remote` | `local` | The mode of pagination. |
@@ -2342,8 +2701,8 @@ export default StepperComponent;
2342
2701
  | ------------- | ------ | -------- | ------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
2343
2702
  | `className` | String | No | n/a | n/a | Additional CSS class for the stepper. |
2344
2703
  | `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. |
2345
- | `orientation` | String | No | `horizontal` `vertical` | `horizontal` | The orientation of the stepper. |
2346
2704
  | `list` | Array | Yes | n/a | n/a | Array of steps to be displayed in the stepper. Each item represents a step. |
2705
+ | `orientation` | String | No | `horizontal` `vertical` | `horizontal` | The orientation of the stepper. |
2347
2706
 
2348
2707
 
2349
2708
  ### TableSkeleton
@@ -2362,8 +2721,8 @@ export default TableSkeletonComponent;
2362
2721
  | Property | Type | Required | Options | Default | Description |
2363
2722
  | ------------- | ------ | -------- | ------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
2364
2723
  | `className` | String | No | n/a | n/a | Additional CSS class for the table skeleton. |
2365
- | `rows` | Number | Yes | n/a | n/a | Number of rows to display in the table skeleton. |
2366
2724
  | `cols` | Number | Yes | n/a | n/a | Number of columns to display in the table skeleton. |
2725
+ | `rows` | Number | Yes | n/a | n/a | Number of rows to display in the table skeleton. |
2367
2726
 
2368
2727
  ### Tabnav
2369
2728