groovinads-ui 1.9.92 → 1.9.94

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 +25 -19
  2. package/dist/index.es.js +14 -2
  3. package/dist/index.js +14 -2
  4. package/index.d.ts +16 -10
  5. package/package.json +9 -1
package/README.md CHANGED
@@ -102,7 +102,7 @@ import { Button } from 'groovinads-ui';
102
102
 
103
103
  <Button
104
104
  variant={'outline'}
105
- size={'xs'}
105
+ size={'sm'}
106
106
  onClick={() => {
107
107
  console.log('Button clicked');
108
108
  }}
@@ -111,6 +111,7 @@ import { Button } from 'groovinads-ui';
111
111
  style={'warning'}
112
112
  className={'mb-5'}
113
113
  processing={true}
114
+ badge={'5'}
114
115
  >
115
116
  Let's groove!
116
117
  </Button>;
@@ -118,6 +119,7 @@ import { Button } from 'groovinads-ui';
118
119
 
119
120
  | Property | Type | Required | Options | Default | Description |
120
121
  | ------------------------- | -------- | -------- | --------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
122
+ | `badge` | String | No | n/a | n/a | Badge content to display as a data-badge attribute on the button element. Useful for notification counts or status indicators. |
121
123
  | `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. |
122
124
  | `className` | String | No | n/a | n/a | Additional CSS class names that can be applied to the button. |
123
125
  | `disabled` | Boolean | No | `true` `false` | `false` | If true, disables the button. If false, the button is enabled. |
@@ -126,7 +128,7 @@ import { Button } from 'groovinads-ui';
126
128
  | `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. Cannot be used together with `hideLabelOnDesktop`. |
127
129
  | `onClick` | Function | No | n/a | n/a | Function to be executed when the button is clicked. |
128
130
  | `processing` | Boolean | No | `true` `false` | `false` | If true, displays a loading animation (…) with a spinner. If false, it will not be displayed. |
129
- | `size` | String | No | `xs` `md` `lg` | `md` | Defines the size of the button. It's optional. |
131
+ | `size` | String | No | `sm` `md` `lg` | `md` | Defines the size of the button. It's optional. |
130
132
  | `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). |
131
133
  | `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. |
132
134
  | `variant` | String | No | `primary` `secondary` `terciary` `outline` | `primary` | Defines the visual style of the button. It's optional. |
@@ -277,7 +279,7 @@ export default NestedDropdownExample;
277
279
  | `setShow` | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. |
278
280
  | `show` | Boolean | No | `true` `false` | n/a | Controls the visibility of the dropdown. If true, the dropdown is visible; if false, it is hidden. |
279
281
  | `showError` | Boolean | No | `true` `false` | `false` | If `true`, displays the dropdown in error state with `not-validated` class. Used for validation. |
280
- | `size` | String | No | `xs` `md` `lg` | `md` | Size of the toggle button. |
282
+ | `size` | String | No | `sm` `md` `lg` | `md` | Size of the toggle button. |
281
283
  | `style` | String | No | `default` `success` `danger` `warning` `link` | `default` | Style/color scheme of the toggle button. |
282
284
  | `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. |
283
285
 
@@ -346,6 +348,7 @@ export default DropdownDatePickerExample;
346
348
  | `setShow` | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. |
347
349
  | `show` | Boolean | No | `true` `false` | `false` | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden. |
348
350
  | `showError` | Boolean | No | `true` `false` | `false` | If `true`, displays the dropdown in error state with `not-validated` class. Controlled externally for validation. |
351
+ | `size` | String | No | `sm` `md` `lg` | `md` | Size of the toggle button. |
349
352
  | `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. |
350
353
 
351
354
  ### DropdownFilter
@@ -490,6 +493,7 @@ export default MultiSelectComponent;
490
493
  | `show` | Boolean | No | `true` `false` | n/a | Controls the visibility of the dropdown. |
491
494
  | `showError` | Boolean | No | `true` `false` | `false` | If `true`, displays the dropdown in error state with `not-validated` class. Controlled externally for validation. |
492
495
  | `showStatus` | String | No | n/a | String | Filter items by status if applicable. |
496
+ | `size` | String | No | `sm` `md` `lg` | `md` | Size of the toggle button. |
493
497
  | `values` | Array | No | n/a | [ ] | Available values for selection. |
494
498
  | `valuesSelected` | Array / Object | No | n/a | [ ] | Represents the state of the values that are currently selected. |
495
499
 
@@ -550,6 +554,7 @@ export default DropdownSimpleDatePickerExample;
550
554
  | `setShow` | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. |
551
555
  | `show` | Boolean | No | `true` `false` | `false` | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden. |
552
556
  | `showError` | Boolean | No | `true` `false` | `false` | If true, the input will be displayed with an error. |
557
+ | `size` | String | No | `sm` `md` `lg` | `md` | Size of the toggle button. |
553
558
 
554
559
  ### Checkbox
555
560
 
@@ -584,7 +589,7 @@ export default CheckboxComponent;
584
589
  | `id` | String | No | n/a | n/a | The unique identifier for the checkbox. It's required for associating the label and checkbox. |
585
590
  | `name` | String | No | n/a | n/a | The `name` attribute of the checkbox. Used to identify the form data after it's submitted. |
586
591
  | `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. |
587
- | `size` | String | No | `xs` `md` `lg` | `md` | Sets the size of the checkbox. |
592
+ | `size` | String | No | `sm` `md` `lg` | `md` | Sets the size of the checkbox. |
588
593
  | `status` | Boolean | No | `true` `false` | `false` | Indicates whether the checkbox is checked, `true` or unchecked `false`. |
589
594
 
590
595
  ### Input
@@ -648,7 +653,7 @@ export default InputComponent;
648
653
  | `requiredText` | String | No | n/a | n/a | Text displayed when input validation fails, used to indicate an error. |
649
654
  | `setShowError` | Function | No | n/a | n/a | Function used to change the state of `showError`. |
650
655
  | `showError` | Boolean | No | `true` `false` | `false` | If true, indicates that an error message should be displayed, usually controlled by `setShowError`. |
651
- | `size` | String | No | `xs` `md` `lg` | `md` | Sets the size of the input field. |
656
+ | `size` | String | No | `sm` `md` `lg` | `md` | Sets the size of the input field. |
652
657
  | `suffix` | String | No | n/a | n/a | Optional suffix text to display inside the input field. |
653
658
  | `type` | String | No | `color` `date` `datetime-local` `email` `file` `image` `month` `number` `password` `tel` `text` `time` `url` `week` | `text` | Type of input |
654
659
  | `value` | String / Number | No | n/a | n/a | The value of the input. |
@@ -706,8 +711,9 @@ export default ExampleInputChip;
706
711
  | `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. |
707
712
  | `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. |
708
713
  | `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. |
714
+ | `name` | String | No | n/a | n/a | The `name` attribute of the input. Used to identify the form data after it's submitted. |
709
715
  | `pillColor` | String | No | `blue` `danger` `dark` `green` `light` `midtone` `neutral` `red` `yellow` | `neutral` | Define the color of the keyword. |
710
- | `placeholder` | String | Yes | n/a | 'Add keywords…' | Displays a suggested or descriptive text inside the input field before the user types. |
716
+ | `placeholder` | String | Yes | n/a | 'Add keywords…' | Displays a suggested or descriptive text inside the input field before the user types. Also used to generate the input's `id` attribute (converted to camelCase). |
711
717
  | `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. |
712
718
  | `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. |
713
719
  | `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. |
@@ -775,7 +781,7 @@ import { Radio } from 'groovinads-ui';
775
781
  | `fullWidth` | Boolean | No | `true` `false` | `false` | If `true`, the radio button will take the full width of its container. |
776
782
  | `name` | String | No | n/a | n/a | The name attribute of the radio button. Used to group multiple radios into a single group. |
777
783
  | `setStatus` | Function | No | n/a | n/a | It is used to update the selection state of the radio button based on user interaction. |
778
- | `size` | String | No | `xs` `md` `lg` | `md` | Sets the size of the radio button. |
784
+ | `size` | String | No | `sm` `md` `lg` | `md` | Sets the size of the radio button. |
779
785
  | `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). |
780
786
 
781
787
  ### Slider
@@ -870,7 +876,7 @@ import { Switch } from 'groovinads-ui';
870
876
  | `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. |
871
877
  | `name` | String | No | n/a | n/a | The name attribute of the switch. Used to identify the form data after it's submitted. |
872
878
  | `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. |
873
- | `size` | String | No | `xs` `md` `lg` | `md` | Sets the size of the switch. |
879
+ | `size` | String | No | `sm` `md` `lg` | `md` | Sets the size of the switch. |
874
880
  | `status` | Number / Boolean | No | `0` `1` | `0` | Indicates whether the switch is on (`1` / `true`) or off (`0` / `false`). |
875
881
  | `switchPosition` | String | No | `start` `end` | `start` | Determines the position of the switch relative to the label. |
876
882
 
@@ -901,7 +907,7 @@ import { Textarea } from 'groovinads-ui';
901
907
  | `requiredText` | String | No | n/a | n/a | Text displayed when textarea validation fails, used to indicate an error. |
902
908
  | `setShowError` | Function | No | n/a | n/a | Function to set the visibility of the error message. |
903
909
  | `showError` | Boolean | No | `true` `false` | `false` | If true, indicates that an error message should be displayed controlled by `setShowError`. |
904
- | `size` | String | No | `xs` `md` `lg` | `md` | Sets the size of the textarea field. |
910
+ | `size` | String | No | `sm` `md` `lg` | `md` | Sets the size of the textarea field. |
905
911
  | `value` | String | No | n/a | n/a | The value of the textarea. |
906
912
 
907
913
  ## Labels
@@ -940,7 +946,7 @@ export default ExampleAlert;
940
946
  | `className` | String | No | n/a | n/a | Additional CSS class for the alert. |
941
947
  | `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. |
942
948
  | `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. |
943
- | `size` | String | No | `xs` `md` `lg` `md` | `md` | Size of the alert. |
949
+ | `size` | String | No | `sm` `md` `lg` `md` | `md` | Size of the alert. |
944
950
  | `type` | String | Yes | `info` `success` `warning` `danger` | `info` | Type of alert to display. Each `type` has a specific associated icon. |
945
951
 
946
952
  ### BlockIcon
@@ -957,7 +963,7 @@ import { BlockIcon } from 'groovinads-ui';
957
963
  | `className` | String | No | n/a | n/a | Additional CSS class for the block icon. |
958
964
  | `color` | String | No | `blue` `danger` `dark` `green` `grey` `light` `midtone` `neutral` `red` `yellow` | `neutral` | Color of the block icon container. |
959
965
  | `name` | String | No | n/a | `font-awesome` | FontAwesome icon name. |
960
- | `size` | String | No | `xs` `md` `lg` | `md` | Size of the block icon container. |
966
+ | `size` | String | No | `sm` `md` `lg` | `md` | Size of the block icon container. |
961
967
 
962
968
  ### EditableContent
963
969
 
@@ -992,13 +998,13 @@ import { Icon } from 'groovinads-ui';
992
998
  />;
993
999
  ```
994
1000
 
995
- | Property | Type | Required | Options | Default | Description |
996
- | ----------- | ------ | -------- | ----------------------------------------------------------------------- | -------------------- | ---------------------------------- |
997
- | `animation` | String | No | `beat` `fade` `beat-fade` `bounce` `flip` `shake` `spin` `spin-reverse` | String | Animation for the icon. |
998
- | `className` | String | No | n/a | n/a | Additional CSS class for the icon. |
999
- | `name` | String | No | n/a | `user-bounty-hunter` | Name of the icon. |
1000
- | `scale` | Number | No | `0.7`, `1`, `2`, `3`, `4` | `1` | Scale of the icon. |
1001
- | `style` | String | No | `light` `solid` `regular` `thin` `duotone` `sharp` `brands` | `solid` | Style of the icon. |
1001
+ | Property | Type | Required | Options | Default | Description |
1002
+ | ----------- | ------ | -------- | -------------------------------------------------------------------------------- | -------------------- | ---------------------------------- |
1003
+ | `animation` | String | No | `beat` `fade` `beat-fade` `bounce` `flip` `shake` `spin` `spin-reverse` `pulse` | String | Animation for the icon. |
1004
+ | `className` | String | No | n/a | n/a | Additional CSS class for the icon. |
1005
+ | `name` | String | No | n/a | `user-bounty-hunter` | Name of the icon. |
1006
+ | `scale` | Number | No | `0.7`, `1`, `2`, `3`, `4` | `1` | Scale of the icon. |
1007
+ | `style` | String | No | `solid` `regular` `duotone` `brands` | `solid` | Style of the icon. |
1002
1008
 
1003
1009
  ### LoginSource
1004
1010
 
@@ -1180,7 +1186,7 @@ import { ModalComponent } from 'groovinads-ui';
1180
1186
  | `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. |
1181
1187
  | `setShow` | Function | Yes | n/a | n/a | Function to toggle the visibility state between visible and hidden. |
1182
1188
  | `show` | Boolean | Yes | `true` `false` | n/a | Controls the visibility of the Modal. If `true`, the Modal is displayed; if `false`, it is hidden. |
1183
- | `size` | String | No | `sm` `md` `lg` | `md` | Sets the size of the Modal. It's optional. |
1189
+ | `size` | String | No | `sm` `md` `lg` `xl` | `md` | Sets the size of the Modal. It's optional. |
1184
1190
  | `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. |
1185
1191
 
1186
1192
  ## Navigation