groovinads-ui 1.9.89 → 1.9.92
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.
- package/README.md +115 -0
- package/dist/index.es.js +2 -2
- package/dist/index.js +2 -2
- package/index.d.ts +40 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -778,6 +778,73 @@ import { Radio } from 'groovinads-ui';
|
|
|
778
778
|
| `size` | String | No | `xs` `md` `lg` | `md` | Sets the size of the radio button. |
|
|
779
779
|
| `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
780
|
|
|
781
|
+
### Slider
|
|
782
|
+
|
|
783
|
+
```jsx
|
|
784
|
+
import React, { useState } from 'react';
|
|
785
|
+
import { Slider } from 'groovinads-ui';
|
|
786
|
+
|
|
787
|
+
const ExampleSlider = () => {
|
|
788
|
+
const [singleValue, setSingleValue] = useState(50);
|
|
789
|
+
const [rangeValue, setRangeValue] = useState([25, 75]);
|
|
790
|
+
|
|
791
|
+
return (
|
|
792
|
+
<>
|
|
793
|
+
{/* Single value slider with label */}
|
|
794
|
+
<Slider
|
|
795
|
+
label='Volume'
|
|
796
|
+
labelInputMax='Value'
|
|
797
|
+
value={singleValue}
|
|
798
|
+
onChange={setSingleValue}
|
|
799
|
+
/>
|
|
800
|
+
|
|
801
|
+
{/* Range slider with labels */}
|
|
802
|
+
<Slider
|
|
803
|
+
range
|
|
804
|
+
value={rangeValue}
|
|
805
|
+
onChange={setRangeValue}
|
|
806
|
+
labelInputMin='Min'
|
|
807
|
+
labelInputMax='Max'
|
|
808
|
+
/>
|
|
809
|
+
|
|
810
|
+
{/* Vertical slider */}
|
|
811
|
+
<Slider
|
|
812
|
+
orientation='vertical'
|
|
813
|
+
value={singleValue}
|
|
814
|
+
onChange={setSingleValue}
|
|
815
|
+
/>
|
|
816
|
+
|
|
817
|
+
{/* Custom range with step */}
|
|
818
|
+
<Slider
|
|
819
|
+
min={0}
|
|
820
|
+
max={1000}
|
|
821
|
+
step={50}
|
|
822
|
+
value={500}
|
|
823
|
+
onChange={(val) => console.log(val)}
|
|
824
|
+
/>
|
|
825
|
+
</>
|
|
826
|
+
);
|
|
827
|
+
};
|
|
828
|
+
|
|
829
|
+
export default ExampleSlider;
|
|
830
|
+
```
|
|
831
|
+
|
|
832
|
+
| Property | Type | Required | Options | Default | Description |
|
|
833
|
+
| ------------- | ------------------------ | -------- | ----------------------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
834
|
+
| `className` | String | No | n/a | `''` | Additional CSS class names that can be applied to the slider container. |
|
|
835
|
+
| `disabled` | Boolean | No | `true` `false` | `false` | If `true`, disables the slider and adds the 'disabled' class. If `false`, the slider is enabled. |
|
|
836
|
+
| `label` | String | No | n/a | n/a | Label text displayed at the start of the slider. Only visible when `range` is `false`. |
|
|
837
|
+
| `labelInputMax` | String | No | n/a | `'Max'` | Label for the end/max Input field. In single mode, this is the label for the value input. |
|
|
838
|
+
| `labelInputMin` | String | No | n/a | `'Min'` | Label for the start/min Input field. Only used when `range` is `true`. |
|
|
839
|
+
| `max` | Number | No | n/a | `100` | Maximum value of the slider. |
|
|
840
|
+
| `min` | Number | No | n/a | `0` | Minimum value of the slider. |
|
|
841
|
+
| `onChange` | Function | No | n/a | n/a | Callback function called when the slider value changes. Receives a number (single mode) or an array of two numbers (range mode). |
|
|
842
|
+
| `orientation` | String | No | `horizontal` `vertical` | `horizontal` | Sets the orientation of the slider. Vertical mode height can be configured via CSS class. |
|
|
843
|
+
| `range` | Boolean | No | `true` `false` | `false` | If `true`, enables range mode with two thumbs and input fields on both sides. If `false`, shows a single thumb with a label at the start and an input field at the end. |
|
|
844
|
+
| `step` | Number | No | n/a | `1` | Step increment for the slider value. |
|
|
845
|
+
| `tooltip` | Boolean | No | `true` `false` | `true` | If `true`, shows a tooltip with the current value when dragging the thumb. If `false`, the tooltip is hidden. |
|
|
846
|
+
| `value` | Number / Array of Number | No | n/a | n/a | Current value of the slider. A single number for single mode, or an array `[start, end]` for range mode. Values entered manually in inputs are automatically clamped to the min/max range. |
|
|
847
|
+
|
|
781
848
|
### Switch
|
|
782
849
|
|
|
783
850
|
```jsx
|
|
@@ -876,6 +943,21 @@ export default ExampleAlert;
|
|
|
876
943
|
| `size` | String | No | `xs` `md` `lg` `md` | `md` | Size of the alert. |
|
|
877
944
|
| `type` | String | Yes | `info` `success` `warning` `danger` | `info` | Type of alert to display. Each `type` has a specific associated icon. |
|
|
878
945
|
|
|
946
|
+
### BlockIcon
|
|
947
|
+
|
|
948
|
+
```jsx
|
|
949
|
+
import React from 'react';
|
|
950
|
+
import { BlockIcon } from 'groovinads-ui';
|
|
951
|
+
|
|
952
|
+
<BlockIcon name='house' size='md' color='blue' className='' />;
|
|
953
|
+
```
|
|
954
|
+
|
|
955
|
+
| Property | Type | Required | Options | Default | Description |
|
|
956
|
+
| ----------- | ------ | -------- | ------------------------------------------------------------------------- | ----------- | ---------------------------------------- |
|
|
957
|
+
| `className` | String | No | n/a | n/a | Additional CSS class for the block icon. |
|
|
958
|
+
| `color` | String | No | `blue` `danger` `dark` `green` `grey` `light` `midtone` `neutral` `red` `yellow` | `neutral` | Color of the block icon container. |
|
|
959
|
+
| `name` | String | No | n/a | `font-awesome` | FontAwesome icon name. |
|
|
960
|
+
| `size` | String | No | `xs` `md` `lg` | `md` | Size of the block icon container. |
|
|
879
961
|
|
|
880
962
|
### EditableContent
|
|
881
963
|
|
|
@@ -975,6 +1057,39 @@ export default PillComponentExample;
|
|
|
975
1057
|
| `disabled` | Boolean | No | `true` `false` | `false` | If `true`, disables the pill. If `false`, the pill is enabled. |
|
|
976
1058
|
| `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. |
|
|
977
1059
|
|
|
1060
|
+
### ProgressBar
|
|
1061
|
+
|
|
1062
|
+
```jsx
|
|
1063
|
+
import React from 'react';
|
|
1064
|
+
import { ProgressBar } from 'groovinads-ui';
|
|
1065
|
+
|
|
1066
|
+
// Basic usage
|
|
1067
|
+
<ProgressBar value={50} max={100} />;
|
|
1068
|
+
|
|
1069
|
+
// With label and warning/alert thresholds
|
|
1070
|
+
<ProgressBar
|
|
1071
|
+
label="Storage used"
|
|
1072
|
+
value={75}
|
|
1073
|
+
max={100}
|
|
1074
|
+
warningTo={70}
|
|
1075
|
+
dangerTo={90}
|
|
1076
|
+
/>;
|
|
1077
|
+
|
|
1078
|
+
// Vertical orientation
|
|
1079
|
+
<ProgressBar value={60} max={100} orientation="vertical" />;
|
|
1080
|
+
```
|
|
1081
|
+
|
|
1082
|
+
| Property | Type | Required | Options | Default | Description |
|
|
1083
|
+
| ------------- | ------- | -------- | --------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------ |
|
|
1084
|
+
| `className` | String | No | n/a | n/a | Additional CSS classes for the progress bar container. |
|
|
1085
|
+
| `dangerTo` | Number | No | n/a | n/a | When value reaches this threshold, adds "danger" class. Takes priority over warning. |
|
|
1086
|
+
| `label` | String | No | n/a | n/a | Label text displayed above the progress bar. |
|
|
1087
|
+
| `max` | Number | No | n/a | `100` | Maximum value for the progress bar. |
|
|
1088
|
+
| `orientation` | String | No | `horizontal` `vertical` | `horizontal` | Progress bar orientation. Vertical fills from bottom to top. |
|
|
1089
|
+
| `showNumbers` | Boolean | No | `true` `false` | `false` | If true, displays min (0) and max values below the progress bar. |
|
|
1090
|
+
| `value` | Number | No | n/a | `0` | Current progress value. |
|
|
1091
|
+
| `warningTo` | Number | No | n/a | n/a | When value reaches this threshold, adds "warning" class. Only applies if value < dangerTo. |
|
|
1092
|
+
|
|
978
1093
|
### Spinner
|
|
979
1094
|
|
|
980
1095
|
```jsx
|