@nimbus-ds/slider 1.0.0-rc.1
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/CHANGELOG.md +21 -0
- package/README.md +139 -0
- package/dist/CHANGELOG.md +21 -0
- package/dist/README.md +139 -0
- package/dist/index.d.ts +138 -0
- package/dist/index.js +2 -0
- package/package.json +37 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
The Slider component allows users to select a range of values within a defined minimum and maximum.
|
|
4
|
+
|
|
5
|
+
## 2026-01-05 `0.0.1`
|
|
6
|
+
|
|
7
|
+
#### 🎉 New features
|
|
8
|
+
|
|
9
|
+
- Added `min`, `max`, `minValue`, `maxValue`, `step` properties to control the slider range and values.
|
|
10
|
+
- Added `appearance` property with variants: primary, success, warning, danger, and neutral.
|
|
11
|
+
- Added `disabled` property to disable the slider.
|
|
12
|
+
- Added `showInputs` property to toggle the visibility of number inputs.
|
|
13
|
+
- Added `showRangeLabels` property to toggle the visibility of range labels.
|
|
14
|
+
- Added `minLabel` and `maxLabel` properties for input labels.
|
|
15
|
+
- Added `inputSeparator` property to customize the separator between inputs.
|
|
16
|
+
- Added `labelPrefix` property to display a prefix before range label values (e.g., "R$", "$").
|
|
17
|
+
- Added `labelSuffix` property to display a suffix after range label values (e.g., "kg", "%").
|
|
18
|
+
- Added `onChange`, `onMinChange`, `onMaxChange`, and `onChangeEnd` callback properties.
|
|
19
|
+
- Added keyboard navigation support (Arrow keys, Home, End).
|
|
20
|
+
- Added full accessibility support with ARIA attributes.
|
|
21
|
+
- Added stories for Storybook documentation.
|
package/README.md
ADDED
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
# `@nimbus-ds/slider`
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@nimbus-ds/slider)
|
|
4
|
+
|
|
5
|
+
The Slider component allows users to select a range of values within a defined minimum and maximum.
|
|
6
|
+
|
|
7
|
+
## Implementation
|
|
8
|
+
|
|
9
|
+
**Install** the component via terminal.
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
$ yarn add @nimbus-ds/slider
|
|
13
|
+
# or
|
|
14
|
+
$ npm install @nimbus-ds/slider
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Component Anatomy
|
|
18
|
+
|
|
19
|
+
The component consists of:
|
|
20
|
+
|
|
21
|
+
- A horizontal track representing the value range
|
|
22
|
+
- Two draggable thumb buttons to select min and max values
|
|
23
|
+
- Optional number inputs for precise value entry
|
|
24
|
+
- Optional range labels showing the minimum and maximum bounds
|
|
25
|
+
|
|
26
|
+
## Guidelines
|
|
27
|
+
|
|
28
|
+
We use the Slider component when we need the user to select a range of values, such as price filters, date ranges, or any numerical range selection.
|
|
29
|
+
|
|
30
|
+
## Features
|
|
31
|
+
|
|
32
|
+
### Range Selection
|
|
33
|
+
|
|
34
|
+
The slider supports dual-thumb interaction, allowing users to select both minimum and maximum values within the defined range. The thumbs are constrained so they cannot cross each other.
|
|
35
|
+
|
|
36
|
+
### Number Inputs
|
|
37
|
+
|
|
38
|
+
Optional number inputs are displayed above the track, allowing users to enter precise values. These inputs can be shown or hidden using the `showInputs` prop.
|
|
39
|
+
|
|
40
|
+
### Keyboard Navigation
|
|
41
|
+
|
|
42
|
+
The component fully supports keyboard navigation:
|
|
43
|
+
|
|
44
|
+
- **Arrow Left/Down**: Decrease value
|
|
45
|
+
- **Arrow Right/Up**: Increase value
|
|
46
|
+
- **Home**: Set to minimum value
|
|
47
|
+
- **End**: Set to maximum value
|
|
48
|
+
|
|
49
|
+
### Customization
|
|
50
|
+
|
|
51
|
+
- **Appearance**: Choose from primary, success, warning, danger, or neutral color schemes
|
|
52
|
+
- **Step**: Define the increment between values
|
|
53
|
+
- **Labels**: Add custom labels for min and max inputs
|
|
54
|
+
- **Prefix/Suffix**: Add prefix (e.g., "R$") or suffix (e.g., "kg") to range labels
|
|
55
|
+
|
|
56
|
+
## Props
|
|
57
|
+
|
|
58
|
+
| Prop | Type | Default | Description |
|
|
59
|
+
| --------------- | ------------------------------------------------------------ | ---------- | ------------------------------------------------- |
|
|
60
|
+
| min | number | 0 | Minimum value of the slider range |
|
|
61
|
+
| max | number | 100 | Maximum value of the slider range |
|
|
62
|
+
| minValue | number | (required) | Current minimum selected value |
|
|
63
|
+
| maxValue | number | (required) | Current maximum selected value |
|
|
64
|
+
| step | number | 1 | Step increment between values |
|
|
65
|
+
| appearance | "primary" \| "success" \| "warning" \| "danger" \| "neutral" | "primary" | Visual appearance of the slider fill |
|
|
66
|
+
| disabled | boolean | false | Whether the slider is disabled |
|
|
67
|
+
| showInputs | boolean | true | Whether to show the number inputs |
|
|
68
|
+
| showRangeLabels | boolean | true | Whether to show the range labels below the slider |
|
|
69
|
+
| minLabel | string | - | Label for the minimum input |
|
|
70
|
+
| maxLabel | string | - | Label for the maximum input |
|
|
71
|
+
| inputSeparator | string | "↔" | Separator displayed between min and max inputs |
|
|
72
|
+
| labelPrefix | string | - | Prefix displayed before range label values |
|
|
73
|
+
| labelSuffix | string | - | Suffix displayed after range label values |
|
|
74
|
+
| onChange | (minValue: number, maxValue: number) => void | - | Callback fired when min or max value changes |
|
|
75
|
+
| onMinChange | (value: number) => void | - | Callback fired when min value changes |
|
|
76
|
+
| onMaxChange | (value: number) => void | - | Callback fired when max value changes |
|
|
77
|
+
| onChangeEnd | (minValue: number, maxValue: number) => void | - | Callback fired when user finishes interaction |
|
|
78
|
+
|
|
79
|
+
## Usage Examples
|
|
80
|
+
|
|
81
|
+
### Basic Usage
|
|
82
|
+
|
|
83
|
+
````
|
|
84
|
+
|
|
85
|
+
### Price Range Filter
|
|
86
|
+
|
|
87
|
+
```tsx
|
|
88
|
+
import { Slider } from "@nimbus-ds/slider";
|
|
89
|
+
|
|
90
|
+
function PriceFilter() {
|
|
91
|
+
const [minPrice, setMinPrice] = useState(200);
|
|
92
|
+
const [maxPrice, setMaxPrice] = useState(7200);
|
|
93
|
+
|
|
94
|
+
return (
|
|
95
|
+
<Slider
|
|
96
|
+
min={0}
|
|
97
|
+
max={9800}
|
|
98
|
+
minValue={minPrice}
|
|
99
|
+
maxValue={maxPrice}
|
|
100
|
+
step={100}
|
|
101
|
+
minLabel="Min."
|
|
102
|
+
maxLabel="Máx."
|
|
103
|
+
labelPrefix="R$"
|
|
104
|
+
onChange={(min, max) => {
|
|
105
|
+
setMinPrice(min);
|
|
106
|
+
setMaxPrice(max);
|
|
107
|
+
}}
|
|
108
|
+
/>
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
````
|
|
112
|
+
|
|
113
|
+
### Without Inputs
|
|
114
|
+
|
|
115
|
+
```tsx
|
|
116
|
+
import { Slider } from "@nimbus-ds/slider";
|
|
117
|
+
|
|
118
|
+
<Slider min={0} max={100} minValue={30} maxValue={70} showInputs={false} />;
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
## Accessibility
|
|
122
|
+
|
|
123
|
+
The Slider component follows WAI-ARIA guidelines:
|
|
124
|
+
|
|
125
|
+
- Each thumb has `role="slider"` with appropriate `aria-valuemin`, `aria-valuemax`, and `aria-valuenow` attributes
|
|
126
|
+
- Inputs have `aria-label` attributes for screen readers
|
|
127
|
+
- Full keyboard navigation support
|
|
128
|
+
- Focus indicators on interactive elements
|
|
129
|
+
|
|
130
|
+
## Related Components
|
|
131
|
+
|
|
132
|
+
- **Input** - For single value text/number input
|
|
133
|
+
- **ProgressBar** - For displaying progress (non-interactive)
|
|
134
|
+
|
|
135
|
+
## Usage
|
|
136
|
+
|
|
137
|
+
View docs [here](https://nimbus.nuvemshop.com.br/documentation/atomic-components/slider).
|
|
138
|
+
|
|
139
|
+
<img alt="Nimbus" style="margin-bottom: 30px;" src="https://tiendanube.github.io/design-system-nimbus/static/media/nimbus-logo.ab60bd79.png" height="30" />
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
The Slider component allows users to select a range of values within a defined minimum and maximum.
|
|
4
|
+
|
|
5
|
+
## 2026-01-05 `0.0.1`
|
|
6
|
+
|
|
7
|
+
#### 🎉 New features
|
|
8
|
+
|
|
9
|
+
- Added `min`, `max`, `minValue`, `maxValue`, `step` properties to control the slider range and values.
|
|
10
|
+
- Added `appearance` property with variants: primary, success, warning, danger, and neutral.
|
|
11
|
+
- Added `disabled` property to disable the slider.
|
|
12
|
+
- Added `showInputs` property to toggle the visibility of number inputs.
|
|
13
|
+
- Added `showRangeLabels` property to toggle the visibility of range labels.
|
|
14
|
+
- Added `minLabel` and `maxLabel` properties for input labels.
|
|
15
|
+
- Added `inputSeparator` property to customize the separator between inputs.
|
|
16
|
+
- Added `labelPrefix` property to display a prefix before range label values (e.g., "R$", "$").
|
|
17
|
+
- Added `labelSuffix` property to display a suffix after range label values (e.g., "kg", "%").
|
|
18
|
+
- Added `onChange`, `onMinChange`, `onMaxChange`, and `onChangeEnd` callback properties.
|
|
19
|
+
- Added keyboard navigation support (Arrow keys, Home, End).
|
|
20
|
+
- Added full accessibility support with ARIA attributes.
|
|
21
|
+
- Added stories for Storybook documentation.
|
package/dist/README.md
ADDED
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
# `@nimbus-ds/slider`
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@nimbus-ds/slider)
|
|
4
|
+
|
|
5
|
+
The Slider component allows users to select a range of values within a defined minimum and maximum.
|
|
6
|
+
|
|
7
|
+
## Implementation
|
|
8
|
+
|
|
9
|
+
**Install** the component via terminal.
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
$ yarn add @nimbus-ds/slider
|
|
13
|
+
# or
|
|
14
|
+
$ npm install @nimbus-ds/slider
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Component Anatomy
|
|
18
|
+
|
|
19
|
+
The component consists of:
|
|
20
|
+
|
|
21
|
+
- A horizontal track representing the value range
|
|
22
|
+
- Two draggable thumb buttons to select min and max values
|
|
23
|
+
- Optional number inputs for precise value entry
|
|
24
|
+
- Optional range labels showing the minimum and maximum bounds
|
|
25
|
+
|
|
26
|
+
## Guidelines
|
|
27
|
+
|
|
28
|
+
We use the Slider component when we need the user to select a range of values, such as price filters, date ranges, or any numerical range selection.
|
|
29
|
+
|
|
30
|
+
## Features
|
|
31
|
+
|
|
32
|
+
### Range Selection
|
|
33
|
+
|
|
34
|
+
The slider supports dual-thumb interaction, allowing users to select both minimum and maximum values within the defined range. The thumbs are constrained so they cannot cross each other.
|
|
35
|
+
|
|
36
|
+
### Number Inputs
|
|
37
|
+
|
|
38
|
+
Optional number inputs are displayed above the track, allowing users to enter precise values. These inputs can be shown or hidden using the `showInputs` prop.
|
|
39
|
+
|
|
40
|
+
### Keyboard Navigation
|
|
41
|
+
|
|
42
|
+
The component fully supports keyboard navigation:
|
|
43
|
+
|
|
44
|
+
- **Arrow Left/Down**: Decrease value
|
|
45
|
+
- **Arrow Right/Up**: Increase value
|
|
46
|
+
- **Home**: Set to minimum value
|
|
47
|
+
- **End**: Set to maximum value
|
|
48
|
+
|
|
49
|
+
### Customization
|
|
50
|
+
|
|
51
|
+
- **Appearance**: Choose from primary, success, warning, danger, or neutral color schemes
|
|
52
|
+
- **Step**: Define the increment between values
|
|
53
|
+
- **Labels**: Add custom labels for min and max inputs
|
|
54
|
+
- **Prefix/Suffix**: Add prefix (e.g., "R$") or suffix (e.g., "kg") to range labels
|
|
55
|
+
|
|
56
|
+
## Props
|
|
57
|
+
|
|
58
|
+
| Prop | Type | Default | Description |
|
|
59
|
+
| --------------- | ------------------------------------------------------------ | ---------- | ------------------------------------------------- |
|
|
60
|
+
| min | number | 0 | Minimum value of the slider range |
|
|
61
|
+
| max | number | 100 | Maximum value of the slider range |
|
|
62
|
+
| minValue | number | (required) | Current minimum selected value |
|
|
63
|
+
| maxValue | number | (required) | Current maximum selected value |
|
|
64
|
+
| step | number | 1 | Step increment between values |
|
|
65
|
+
| appearance | "primary" \| "success" \| "warning" \| "danger" \| "neutral" | "primary" | Visual appearance of the slider fill |
|
|
66
|
+
| disabled | boolean | false | Whether the slider is disabled |
|
|
67
|
+
| showInputs | boolean | true | Whether to show the number inputs |
|
|
68
|
+
| showRangeLabels | boolean | true | Whether to show the range labels below the slider |
|
|
69
|
+
| minLabel | string | - | Label for the minimum input |
|
|
70
|
+
| maxLabel | string | - | Label for the maximum input |
|
|
71
|
+
| inputSeparator | string | "↔" | Separator displayed between min and max inputs |
|
|
72
|
+
| labelPrefix | string | - | Prefix displayed before range label values |
|
|
73
|
+
| labelSuffix | string | - | Suffix displayed after range label values |
|
|
74
|
+
| onChange | (minValue: number, maxValue: number) => void | - | Callback fired when min or max value changes |
|
|
75
|
+
| onMinChange | (value: number) => void | - | Callback fired when min value changes |
|
|
76
|
+
| onMaxChange | (value: number) => void | - | Callback fired when max value changes |
|
|
77
|
+
| onChangeEnd | (minValue: number, maxValue: number) => void | - | Callback fired when user finishes interaction |
|
|
78
|
+
|
|
79
|
+
## Usage Examples
|
|
80
|
+
|
|
81
|
+
### Basic Usage
|
|
82
|
+
|
|
83
|
+
````
|
|
84
|
+
|
|
85
|
+
### Price Range Filter
|
|
86
|
+
|
|
87
|
+
```tsx
|
|
88
|
+
import { Slider } from "@nimbus-ds/slider";
|
|
89
|
+
|
|
90
|
+
function PriceFilter() {
|
|
91
|
+
const [minPrice, setMinPrice] = useState(200);
|
|
92
|
+
const [maxPrice, setMaxPrice] = useState(7200);
|
|
93
|
+
|
|
94
|
+
return (
|
|
95
|
+
<Slider
|
|
96
|
+
min={0}
|
|
97
|
+
max={9800}
|
|
98
|
+
minValue={minPrice}
|
|
99
|
+
maxValue={maxPrice}
|
|
100
|
+
step={100}
|
|
101
|
+
minLabel="Min."
|
|
102
|
+
maxLabel="Máx."
|
|
103
|
+
labelPrefix="R$"
|
|
104
|
+
onChange={(min, max) => {
|
|
105
|
+
setMinPrice(min);
|
|
106
|
+
setMaxPrice(max);
|
|
107
|
+
}}
|
|
108
|
+
/>
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
````
|
|
112
|
+
|
|
113
|
+
### Without Inputs
|
|
114
|
+
|
|
115
|
+
```tsx
|
|
116
|
+
import { Slider } from "@nimbus-ds/slider";
|
|
117
|
+
|
|
118
|
+
<Slider min={0} max={100} minValue={30} maxValue={70} showInputs={false} />;
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
## Accessibility
|
|
122
|
+
|
|
123
|
+
The Slider component follows WAI-ARIA guidelines:
|
|
124
|
+
|
|
125
|
+
- Each thumb has `role="slider"` with appropriate `aria-valuemin`, `aria-valuemax`, and `aria-valuenow` attributes
|
|
126
|
+
- Inputs have `aria-label` attributes for screen readers
|
|
127
|
+
- Full keyboard navigation support
|
|
128
|
+
- Focus indicators on interactive elements
|
|
129
|
+
|
|
130
|
+
## Related Components
|
|
131
|
+
|
|
132
|
+
- **Input** - For single value text/number input
|
|
133
|
+
- **ProgressBar** - For displaying progress (non-interactive)
|
|
134
|
+
|
|
135
|
+
## Usage
|
|
136
|
+
|
|
137
|
+
View docs [here](https://nimbus.nuvemshop.com.br/documentation/atomic-components/slider).
|
|
138
|
+
|
|
139
|
+
<img alt="Nimbus" style="margin-bottom: 30px;" src="https://tiendanube.github.io/design-system-nimbus/static/media/nimbus-logo.ab60bd79.png" height="30" />
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
// Generated by dts-bundle-generator v7.2.0
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { ComponentPropsWithRef, HTMLAttributes } from 'react';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Available appearance variants for the slider fill.
|
|
8
|
+
* Controls the color scheme of the active range portion of the slider.
|
|
9
|
+
*/
|
|
10
|
+
export type SliderAppearance = "primary" | "success" | "warning" | "danger" | "neutral";
|
|
11
|
+
/**
|
|
12
|
+
* Common properties shared between single and range slider modes.
|
|
13
|
+
*/
|
|
14
|
+
export interface SliderCommonProperties {
|
|
15
|
+
/**
|
|
16
|
+
* The minimum value of the slider range.
|
|
17
|
+
* @default 0
|
|
18
|
+
*/
|
|
19
|
+
min?: number;
|
|
20
|
+
/**
|
|
21
|
+
* The maximum value of the slider range.
|
|
22
|
+
* @default 100
|
|
23
|
+
*/
|
|
24
|
+
max?: number;
|
|
25
|
+
/**
|
|
26
|
+
* The step increment between values.
|
|
27
|
+
* @default 1
|
|
28
|
+
*/
|
|
29
|
+
step?: number;
|
|
30
|
+
/**
|
|
31
|
+
* Visual appearance of the slider fill.
|
|
32
|
+
* @default "primary"
|
|
33
|
+
*/
|
|
34
|
+
appearance?: SliderAppearance;
|
|
35
|
+
/**
|
|
36
|
+
* Whether the slider is disabled.
|
|
37
|
+
* @default false
|
|
38
|
+
*/
|
|
39
|
+
disabled?: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* This is an attribute used to identify a DOM node for testing purposes.
|
|
42
|
+
*/
|
|
43
|
+
"data-testid"?: string;
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* Properties specific to single value slider mode.
|
|
47
|
+
* Used for documentation generation.
|
|
48
|
+
*/
|
|
49
|
+
export interface SliderProperties extends SliderCommonProperties {
|
|
50
|
+
/**
|
|
51
|
+
* The current value of the slider (single mode).
|
|
52
|
+
*/
|
|
53
|
+
value: number;
|
|
54
|
+
/**
|
|
55
|
+
* Callback fired when the value changes.
|
|
56
|
+
*/
|
|
57
|
+
onChange?: (value: number) => void;
|
|
58
|
+
/**
|
|
59
|
+
* Callback fired when the user finishes interacting with the slider.
|
|
60
|
+
*/
|
|
61
|
+
onChangeEnd?: (value: number) => void;
|
|
62
|
+
/**
|
|
63
|
+
* Accessible label for the slider thumb.
|
|
64
|
+
* @default "Value"
|
|
65
|
+
*/
|
|
66
|
+
ariaLabel?: string;
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* Properties specific to range slider mode (two thumbs).
|
|
70
|
+
*/
|
|
71
|
+
export interface SliderRangeProperties extends SliderCommonProperties {
|
|
72
|
+
/**
|
|
73
|
+
* The current minimum value selected on the slider.
|
|
74
|
+
*/
|
|
75
|
+
minValue: number;
|
|
76
|
+
/**
|
|
77
|
+
* The current maximum value selected on the slider.
|
|
78
|
+
*/
|
|
79
|
+
maxValue: number;
|
|
80
|
+
/**
|
|
81
|
+
* Callback fired when the min or max value changes.
|
|
82
|
+
*/
|
|
83
|
+
onChange?: (minValue: number, maxValue: number) => void;
|
|
84
|
+
/**
|
|
85
|
+
* Callback fired when the min value changes.
|
|
86
|
+
*/
|
|
87
|
+
onMinChange?: (value: number) => void;
|
|
88
|
+
/**
|
|
89
|
+
* Callback fired when the max value changes.
|
|
90
|
+
*/
|
|
91
|
+
onMaxChange?: (value: number) => void;
|
|
92
|
+
/**
|
|
93
|
+
* Callback fired when the user finishes interacting with the slider.
|
|
94
|
+
*/
|
|
95
|
+
onChangeEnd?: (minValue: number, maxValue: number) => void;
|
|
96
|
+
/**
|
|
97
|
+
* Accessible label for the minimum value thumb.
|
|
98
|
+
* @default "Minimum value"
|
|
99
|
+
*/
|
|
100
|
+
minAriaLabel?: string;
|
|
101
|
+
/**
|
|
102
|
+
* Accessible label for the maximum value thumb.
|
|
103
|
+
* @default "Maximum value"
|
|
104
|
+
*/
|
|
105
|
+
maxAriaLabel?: string;
|
|
106
|
+
}
|
|
107
|
+
/**
|
|
108
|
+
* Props for single value slider mode.
|
|
109
|
+
*/
|
|
110
|
+
export type SliderBaseProps = SliderProperties & Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "className" | "style">;
|
|
111
|
+
/**
|
|
112
|
+
* Props for range slider mode.
|
|
113
|
+
*/
|
|
114
|
+
export type SliderRangeBaseProps = SliderRangeProperties & Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "className" | "style">;
|
|
115
|
+
declare const SliderRange: React.ForwardRefExoticComponent<SliderRangeProperties & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style" | "onChange"> & React.RefAttributes<HTMLDivElement>>;
|
|
116
|
+
export type SliderRangeProps = ComponentPropsWithRef<typeof SliderRange>;
|
|
117
|
+
declare const SliderBase: React.ForwardRefExoticComponent<SliderProperties & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style" | "onChange"> & React.RefAttributes<HTMLDivElement>>;
|
|
118
|
+
/**
|
|
119
|
+
* Slider component with Range subcomponent.
|
|
120
|
+
*
|
|
121
|
+
* @example
|
|
122
|
+
* // Single value slider
|
|
123
|
+
* <Slider value={50} onChange={(value) => console.log(value)} />
|
|
124
|
+
*
|
|
125
|
+
* @example
|
|
126
|
+
* // Range slider
|
|
127
|
+
* <Slider.Range minValue={25} maxValue={75} onChange={(min, max) => console.log(min, max)} />
|
|
128
|
+
*/
|
|
129
|
+
export declare const Slider: React.ForwardRefExoticComponent<SliderProperties & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style" | "onChange"> & React.RefAttributes<HTMLDivElement>> & {
|
|
130
|
+
Range: React.ForwardRefExoticComponent<SliderRangeProperties & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style" | "onChange"> & React.RefAttributes<HTMLDivElement>>;
|
|
131
|
+
};
|
|
132
|
+
export type SliderProps = ComponentPropsWithRef<typeof SliderBase>;
|
|
133
|
+
|
|
134
|
+
export {
|
|
135
|
+
Slider as default,
|
|
136
|
+
};
|
|
137
|
+
|
|
138
|
+
export {};
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react"),require("@nimbus-ds/styles")):"function"==typeof define&&define.amd?define(["react","@nimbus-ds/styles"],r):"object"==typeof exports?exports["@nimbus-ds/slider"]=r(require("react"),require("@nimbus-ds/styles")):e["@nimbus-ds/slider"]=r(e.react,e["@nimbus-ds/styles"])}(global,((e,r)=>(()=>{"use strict";var t={612:(e,r,t)=>{function n(e){var r=e.match(/^var\((.*)\)$/);return r?r[1]:e}function a(e,r){var t=e;for(var n of r){if(!(n in t))throw new Error("Path ".concat(r.join(" -> ")," does not exist in object"));t=t[n]}return t}function o(e,r){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[],n=e.constructor();for(var a in e){var u=e[a],l=[...t,a];"string"==typeof u||"number"==typeof u||null==u?n[a]=r(u,l):"object"!=typeof u||Array.isArray(u)?console.warn('Skipping invalid key "'.concat(l.join("."),'". Should be a string, number, null or object. Received: "').concat(Array.isArray(u)?"Array":typeof u,'"')):n[a]=o(u,r,l)}return n}function u(e,r){var t={};if("object"==typeof r){var u=e;o(r,((e,r)=>{if(null!=e){var o=a(u,r);t[n(o)]=String(e)}}))}else{var l=e;for(var i in l){var c=l[i];null!=c&&(t[n(i)]=c)}}return Object.defineProperty(t,"toString",{value:function(){return Object.keys(this).map((e=>"".concat(e,":").concat(this[e]))).join(";")},writable:!1}),t}function l(e,r,t){e.style.setProperty(n(r),t)}function i(e,r,t){if("object"==typeof t){var n=r;o(t,((r,t)=>{null!=r&&l(e,a(n,t),String(r))}))}else{var u=r;for(var i in u){null!=u[i]&&l(e,i,u[i])}}}t.r(r),t.d(r,{assignInlineVars:()=>u,setElementVars:()=>i})},901:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.SLIDER_DEFAULTS=r.Slider=void 0;const n=t(769).__importStar(t(155)),a=t(367),o=t(711),u=t(337),l=t(63),i=t(510),c=(0,n.forwardRef)((({min:e=l.SLIDER_DEFAULTS.min,max:r=l.SLIDER_DEFAULTS.max,value:t,step:i=l.SLIDER_DEFAULTS.step,appearance:c=l.SLIDER_DEFAULTS.appearance,disabled:s=l.SLIDER_DEFAULTS.disabled,onChange:d,onChangeEnd:f,ariaLabel:p,"data-testid":m},b)=>{const y=(0,n.useRef)(null),v=(0,n.useRef)(t);v.current=t;const h=(0,n.useCallback)((t=>(0,l.clampSingleValue)(t,e,r)),[e,r]),{dragValue:_,handleTrackMouseDown:g,handleThumbMouseDown:S}=(0,o.useSingleSliderDrag)({trackRef:y,min:e,max:r,step:i,disabled:s,value:t,clampValue:h,onChange:d,onChangeEnd:f}),w=_??t,E=(0,n.useCallback)((t=>{if(s)return;let n;const a=v.current;switch(t.key){case"ArrowLeft":case"ArrowDown":n=(0,l.clampSingleValue)(a-i,e,r);break;case"ArrowRight":case"ArrowUp":n=(0,l.clampSingleValue)(a+i,e,r);break;case"Home":n=e;break;case"End":n=r;break;default:return}t.preventDefault(),d?.(n),f?.(n)}),[s,i,e,r,d,f]),M=(0,l.calculatePercentage)(w,e,r);return n.default.createElement("div",{ref:b,className:a.slider.classnames.container,"data-testid":m},n.default.createElement("div",{className:a.slider.classnames.trackContainer,onMouseDown:g,role:"none"},n.default.createElement(u.SliderTrack,{ref:y,appearance:c,maxPercentage:M,dataTestId:m},n.default.createElement(u.SliderThumb,{type:"single",percentage:M,value:w,minAriaValue:e,maxAriaValue:r,disabled:s,ariaLabel:p,dataTestId:m?`${m}-thumb`:void 0,onMouseDown:S,onKeyDown:E}))))}));c.displayName="Slider",r.Slider=Object.assign(c,{Range:i.SliderRange}),r.Slider.Range.displayName="Slider.Range";var s=t(63);Object.defineProperty(r,"SLIDER_DEFAULTS",{enumerable:!0,get:function(){return s.SLIDER_DEFAULTS}})},510:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.SliderRange=void 0;const n=t(769).__importStar(t(155)),a=t(367),o=t(711),u=t(337),l=t(63);r.SliderRange=(0,n.forwardRef)((({min:e=l.SLIDER_DEFAULTS.min,max:r=l.SLIDER_DEFAULTS.max,minValue:t,maxValue:i,step:c=l.SLIDER_DEFAULTS.step,appearance:s=l.SLIDER_DEFAULTS.appearance,disabled:d=l.SLIDER_DEFAULTS.disabled,onChange:f,onMinChange:p,onMaxChange:m,onChangeEnd:b,minAriaLabel:y,maxAriaLabel:v,"data-testid":h},_)=>{const g=(0,n.useRef)(null),{localMinValue:S,localMaxValue:w,clampValue:E,updateValues:M}=(0,o.useSliderValues)({minValue:t,maxValue:i,min:e,max:r,step:c,onChange:f,onMinChange:p,onMaxChange:m,onChangeEnd:b}),{dragMinValue:D,dragMaxValue:T,handleTrackMouseDown:x,handleMinMouseDown:P,handleMaxMouseDown:j}=(0,o.useSliderDrag)({trackRef:g,min:e,max:r,step:c,disabled:d,localMinValue:S,localMaxValue:w,clampValue:E,updateValues:M}),O=D??S,R=T??w,k=(0,n.useRef)(S),L=(0,n.useRef)(w);k.current=S,L.current=w;const V=(0,n.useCallback)(((t,n)=>{if(d)return;let a;const o="min"===t?k.current:L.current,u=k.current,l=L.current;switch(n.key){case"ArrowLeft":case"ArrowDown":a=E(o-c,"min"===t);break;case"ArrowRight":case"ArrowUp":a=E(o+c,"min"===t);break;case"Home":a="min"===t?e:u+c;break;case"End":a="max"===t?r:l-c;break;default:return}n.preventDefault(),"min"===t?M(a,l,!0):M(u,a,!0)}),[d,c,e,r,E,M]),A=(0,n.useCallback)((e=>V("min",e)),[V]),C=(0,n.useCallback)((e=>V("max",e)),[V]),I=(0,l.calculatePercentage)(O,e,r),F=(0,l.calculatePercentage)(R,e,r);return n.default.createElement("div",{ref:_,className:a.slider.classnames.container,"data-testid":h},n.default.createElement("div",{className:a.slider.classnames.trackContainer,onMouseDown:x,role:"none"},n.default.createElement(u.SliderTrack,{ref:g,appearance:s,minPercentage:I,maxPercentage:F,dataTestId:h},n.default.createElement(u.SliderThumb,{type:"min",percentage:I,value:O,minAriaValue:e,maxAriaValue:R-c,disabled:d,ariaLabel:y,dataTestId:h?`${h}-min-thumb`:void 0,onMouseDown:P,onKeyDown:A}),n.default.createElement(u.SliderThumb,{type:"max",percentage:F,value:R,minAriaValue:O+c,maxAriaValue:r,disabled:d,ariaLabel:v,dataTestId:h?`${h}-max-thumb`:void 0,onMouseDown:j,onKeyDown:C}))))})),r.SliderRange.displayName="Slider.Range"},574:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.SliderThumb=void 0;const n=t(769).__importStar(t(155)),a=t(367),o=({type:e,percentage:r,value:t,minAriaValue:o,maxAriaValue:u,disabled:l,ariaLabel:i,dataTestId:c,onMouseDown:s,onKeyDown:d})=>n.default.createElement("div",{className:a.slider.classnames.thumbWrapper,style:{left:`${r}%`}},n.default.createElement("button",{type:"button",className:[a.slider.classnames.thumb,l&&a.slider.classnames.thumb_disabled].filter(Boolean).join(" "),onMouseDown:s,onTouchStart:s,onKeyDown:d,disabled:l,role:"slider","aria-valuemin":o,"aria-valuemax":u,"aria-valuenow":t,"aria-label":i??("min"===e?"Minimum value":"max"===e?"Maximum value":"Value"),tabIndex:l?-1:0,"data-testid":c}));o.defaultProps={ariaLabel:void 0,dataTestId:void 0},r.SliderThumb=(0,n.memo)(o)},549:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.SliderThumb=void 0;var n=t(574);Object.defineProperty(r,"SliderThumb",{enumerable:!0,get:function(){return n.SliderThumb}})},198:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.SliderTrack=void 0;const n=t(769).__importStar(t(155)),a=t(367),o=t(612),u=(0,n.forwardRef)((({appearance:e,minPercentage:r=0,maxPercentage:t,dataTestId:u,children:l},i)=>n.default.createElement("div",{ref:i,className:a.slider.classnames.track,"data-testid":u?`${u}-track`:void 0},n.default.createElement("div",{className:a.slider.classnames.fill[e],style:(0,o.assignInlineVars)({[a.slider.vars.fillLeft]:`${r}%`,[a.slider.vars.fillRight]:100-t+"%"}),"data-testid":u?`${u}-fill`:void 0}),l)));u.displayName="SliderTrack",u.defaultProps={minPercentage:0,dataTestId:void 0},r.SliderTrack=(0,n.memo)(u)},362:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.SliderTrack=void 0;var n=t(198);Object.defineProperty(r,"SliderTrack",{enumerable:!0,get:function(){return n.SliderTrack}})},337:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.SliderTrack=r.SliderThumb=void 0;var n=t(549);Object.defineProperty(r,"SliderThumb",{enumerable:!0,get:function(){return n.SliderThumb}});var a=t(362);Object.defineProperty(r,"SliderTrack",{enumerable:!0,get:function(){return a.SliderTrack}})},711:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.useSingleSliderDrag=r.useSliderDrag=r.useSliderValues=void 0;var n=t(59);Object.defineProperty(r,"useSliderValues",{enumerable:!0,get:function(){return n.useSliderValues}});var a=t(591);Object.defineProperty(r,"useSliderDrag",{enumerable:!0,get:function(){return a.useSliderDrag}});var o=t(915);Object.defineProperty(r,"useSingleSliderDrag",{enumerable:!0,get:function(){return o.useSingleSliderDrag}})},135:(e,r)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.removeDragListeners=r.attachDragListeners=r.getClientXFromEvent=r.createGetValueFromClientX=r.createSnapToStep=r.DRAG_THROTTLE_MS=void 0,r.DRAG_THROTTLE_MS=50;r.createSnapToStep=(e,r,t)=>n=>{const a=Math.round((n-e)/t)*t+e;return Math.max(e,Math.min(r,a))};r.createGetValueFromClientX=(e,r,t)=>(n,a)=>{const o=Math.max(0,Math.min(1,(n-a.left)/a.width));return t(e+o*(r-e))};r.getClientXFromEvent=e=>"touches"in e?e.touches[0].clientX:e.clientX;r.attachDragListeners=({handleMouseMove:e,handleMouseUp:r})=>{document.addEventListener("mousemove",e),document.addEventListener("mouseup",r),document.addEventListener("touchmove",e,{passive:!0}),document.addEventListener("touchend",r)};r.removeDragListeners=({handleMouseMove:e,handleMouseUp:r})=>{document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",r),document.removeEventListener("touchmove",e),document.removeEventListener("touchend",r)}},915:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.useSingleSliderDrag=void 0;const n=t(155),a=t(135);r.useSingleSliderDrag=({trackRef:e,min:r,max:t,step:o,disabled:u,value:l,clampValue:i,onChange:c,onChangeEnd:s})=>{const[d,f]=(0,n.useState)(!1),[p,m]=(0,n.useState)(null),b=(0,n.useRef)(!1),y=(0,n.useRef)(l),v=(0,n.useRef)(null),h=(0,n.useRef)(0),_=(0,n.useRef)(null);(0,n.useEffect)((()=>{b.current||(y.current=l)}),[l]);const g=(0,n.useMemo)((()=>(0,a.createSnapToStep)(r,t,o)),[r,t,o]),S=(0,n.useMemo)((()=>(0,a.createGetValueFromClientX)(r,t,g)),[r,t,g]),w=(0,n.useCallback)((t=>{if(!e.current)return r;const n=e.current.getBoundingClientRect();return S(t,n)}),[r,e,S]),E=(0,n.useCallback)((e=>{if(u)return;const r=w(e.clientX),t=i(r);b.current=!0,f(!0),y.current=t,m(t)}),[u,w,i]),M=(0,n.useCallback)((e=>{u||(e.stopPropagation(),b.current=!0,f(!0))}),[u]);return(0,n.useEffect)((()=>{if(!d)return;if(e.current){const r=e.current.getBoundingClientRect();v.current={left:r.left,width:r.width}}const r=e=>{(e=>{if(!v.current)return;const r=S(e,v.current),t=i(r);t!==y.current&&(y.current=t,m(t));const n=Date.now();n-h.current>=a.DRAG_THROTTLE_MS&&(h.current=n,_.current=y.current,c?.(y.current))})((0,a.getClientXFromEvent)(e))},t=()=>{v.current=null;const e=y.current;b.current=!1,f(!1),m(null),_.current!==e&&c?.(e),h.current=0,_.current=null,s?.(e)};return(0,a.attachDragListeners)({handleMouseMove:r,handleMouseUp:t}),()=>{(0,a.removeDragListeners)({handleMouseMove:r,handleMouseUp:t})}}),[d,e,S,i,c,s]),{isDragging:d,dragValue:p,handleTrackMouseDown:E,handleThumbMouseDown:M}}},591:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.useSliderDrag=void 0;const n=t(155),a=t(135);r.useSliderDrag=({trackRef:e,min:r,max:t,step:o,disabled:u,localMinValue:l,localMaxValue:i,clampValue:c,updateValues:s})=>{const[d,f]=(0,n.useState)(null),[p,m]=(0,n.useState)(null),[b,y]=(0,n.useState)(null),v=(0,n.useRef)(null),h=(0,n.useRef)(l),_=(0,n.useRef)(i),g=(0,n.useRef)(null),S=(0,n.useRef)(0),w=(0,n.useRef)(null),E=(0,n.useRef)(null);(0,n.useEffect)((()=>{v.current||(h.current=l,_.current=i)}),[l,i]);const M=(0,n.useMemo)((()=>(0,a.createSnapToStep)(r,t,o)),[r,t,o]),D=(0,n.useMemo)((()=>(0,a.createGetValueFromClientX)(r,t,M)),[r,t,M]),T=(0,n.useCallback)((t=>{if(!e.current)return r;const n=e.current.getBoundingClientRect();return D(t,n)}),[r,e,D]),x=(0,n.useCallback)((e=>{if(u)return;const r=T(e.clientX),t=h.current,n=_.current;if(Math.abs(r-t)<=Math.abs(r-n)){const e=c(r,!0,t,n);v.current="min",f("min"),h.current=e,m(e),s(e,n)}else{const e=c(r,!1,t,n);v.current="max",f("max"),_.current=e,y(e),s(t,e)}}),[u,T,c,s]),P=(0,n.useCallback)((e=>r=>{u||(r.stopPropagation(),v.current=e,f(e))}),[u]),j=P("min"),O=P("max");return(0,n.useEffect)((()=>{if(!d)return;if(e.current){const r=e.current.getBoundingClientRect();g.current={left:r.left,width:r.width}}const r=e=>{(e=>{if(!g.current)return;const r=D(e,g.current),t="min"===v.current,n=h.current,o=_.current,u=c(r,t,n,o);t&&u!==n?(h.current=u,m(u)):t||u===o||(_.current=u,y(u));const l=Date.now();l-S.current>=a.DRAG_THROTTLE_MS&&(S.current=l,w.current=h.current,E.current=_.current,s(h.current,_.current,!1))})((0,a.getClientXFromEvent)(e))},t=()=>{g.current=null;const e=h.current,r=_.current;v.current=null,f(null),m(null),y(null);const t=w.current!==e||E.current!==r;S.current=0,w.current=null,E.current=null,t&&s(e,r,!1),s(e,r,!0)};return(0,a.attachDragListeners)({handleMouseMove:r,handleMouseUp:t}),()=>{(0,a.removeDragListeners)({handleMouseMove:r,handleMouseUp:t})}}),[d,e,D,c,s]),{isDragging:d,dragMinValue:p,dragMaxValue:b,handleTrackMouseDown:x,handleMinMouseDown:j,handleMaxMouseDown:O}}},59:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.useSliderValues=void 0;const n=t(155),a=t(63);r.useSliderValues=({minValue:e,maxValue:r,min:t,max:o,step:u,onChange:l,onMinChange:i,onMaxChange:c,onChangeEnd:s})=>{const[d,f]=(0,n.useState)(e),[p,m]=(0,n.useState)(r),b=(0,n.useRef)(d),y=(0,n.useRef)(p);(0,n.useEffect)((()=>{b.current=d,y.current=p}),[d,p]),(0,n.useEffect)((()=>{f(e),m(r)}),[e,r]);const v=(0,n.useCallback)(((e,r,n,a)=>{const l=n??b.current,i=a??y.current;return r?Math.max(t,Math.min(e,i-u)):Math.min(o,Math.max(e,l+u))}),[t,o,u]),h=(0,n.useCallback)((e=>(0,a.calculatePercentage)(e,t,o)),[t,o]),_=(0,n.useCallback)(((e,r,t=!1)=>{f(e),m(r),l?.(e,r),i?.(e),c?.(r),t&&s?.(e,r)}),[l,i,c,s]);return{localMinValue:d,localMaxValue:p,clampValue:v,updateValues:_,getPercentage:h}}},63:(e,r)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.clampSingleValue=r.calculatePercentage=r.SLIDER_DEFAULTS=void 0,r.SLIDER_DEFAULTS={min:0,max:100,step:1,appearance:"primary",disabled:!1};r.calculatePercentage=(e,r,t)=>{const n=t-r;return 0===n?0:(e-r)/n*100};r.clampSingleValue=(e,r,t)=>Math.max(r,Math.min(t,e))},367:e=>{e.exports=r},155:r=>{r.exports=e},769:(e,r,t)=>{t.r(r),t.d(r,{__addDisposableResource:()=>V,__assign:()=>o,__asyncDelegator:()=>D,__asyncGenerator:()=>M,__asyncValues:()=>T,__await:()=>E,__awaiter:()=>m,__classPrivateFieldGet:()=>R,__classPrivateFieldIn:()=>L,__classPrivateFieldSet:()=>k,__createBinding:()=>y,__decorate:()=>l,__disposeResources:()=>C,__esDecorate:()=>c,__exportStar:()=>v,__extends:()=>a,__generator:()=>b,__importDefault:()=>O,__importStar:()=>j,__makeTemplateObject:()=>x,__metadata:()=>p,__param:()=>i,__propKey:()=>d,__read:()=>_,__rest:()=>u,__runInitializers:()=>s,__setFunctionName:()=>f,__spread:()=>g,__spreadArray:()=>w,__spreadArrays:()=>S,__values:()=>h,default:()=>I});var n=function(e,r){return n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,r){e.__proto__=r}||function(e,r){for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])},n(e,r)};function a(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Class extends value "+String(r)+" is not a constructor or null");function t(){this.constructor=e}n(e,r),e.prototype=null===r?Object.create(r):(t.prototype=r.prototype,new t)}var o=function(){return o=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var a in r=arguments[t])Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);return e},o.apply(this,arguments)};function u(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)r.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(t[n[a]]=e[n[a]])}return t}function l(e,r,t,n){var a,o=arguments.length,u=o<3?r:null===n?n=Object.getOwnPropertyDescriptor(r,t):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)u=Reflect.decorate(e,r,t,n);else for(var l=e.length-1;l>=0;l--)(a=e[l])&&(u=(o<3?a(u):o>3?a(r,t,u):a(r,t))||u);return o>3&&u&&Object.defineProperty(r,t,u),u}function i(e,r){return function(t,n){r(t,n,e)}}function c(e,r,t,n,a,o){function u(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var l,i=n.kind,c="getter"===i?"get":"setter"===i?"set":"value",s=!r&&e?n.static?e:e.prototype:null,d=r||(s?Object.getOwnPropertyDescriptor(s,n.name):{}),f=!1,p=t.length-1;p>=0;p--){var m={};for(var b in n)m[b]="access"===b?{}:n[b];for(var b in n.access)m.access[b]=n.access[b];m.addInitializer=function(e){if(f)throw new TypeError("Cannot add initializers after decoration has completed");o.push(u(e||null))};var y=(0,t[p])("accessor"===i?{get:d.get,set:d.set}:d[c],m);if("accessor"===i){if(void 0===y)continue;if(null===y||"object"!=typeof y)throw new TypeError("Object expected");(l=u(y.get))&&(d.get=l),(l=u(y.set))&&(d.set=l),(l=u(y.init))&&a.unshift(l)}else(l=u(y))&&("field"===i?a.unshift(l):d[c]=l)}s&&Object.defineProperty(s,n.name,d),f=!0}function s(e,r,t){for(var n=arguments.length>2,a=0;a<r.length;a++)t=n?r[a].call(e,t):r[a].call(e);return n?t:void 0}function d(e){return"symbol"==typeof e?e:"".concat(e)}function f(e,r,t){return"symbol"==typeof r&&(r=r.description?"[".concat(r.description,"]"):""),Object.defineProperty(e,"name",{configurable:!0,value:t?"".concat(t," ",r):r})}function p(e,r){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,r)}function m(e,r,t,n){return new(t||(t=Promise))((function(a,o){function u(e){try{i(n.next(e))}catch(e){o(e)}}function l(e){try{i(n.throw(e))}catch(e){o(e)}}function i(e){var r;e.done?a(e.value):(r=e.value,r instanceof t?r:new t((function(e){e(r)}))).then(u,l)}i((n=n.apply(e,r||[])).next())}))}function b(e,r){var t,n,a,o,u={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]};return o={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function l(l){return function(i){return function(l){if(t)throw new TypeError("Generator is already executing.");for(;o&&(o=0,l[0]&&(u=0)),u;)try{if(t=1,n&&(a=2&l[0]?n.return:l[0]?n.throw||((a=n.return)&&a.call(n),0):n.next)&&!(a=a.call(n,l[1])).done)return a;switch(n=0,a&&(l=[2&l[0],a.value]),l[0]){case 0:case 1:a=l;break;case 4:return u.label++,{value:l[1],done:!1};case 5:u.label++,n=l[1],l=[0];continue;case 7:l=u.ops.pop(),u.trys.pop();continue;default:if(!(a=u.trys,(a=a.length>0&&a[a.length-1])||6!==l[0]&&2!==l[0])){u=0;continue}if(3===l[0]&&(!a||l[1]>a[0]&&l[1]<a[3])){u.label=l[1];break}if(6===l[0]&&u.label<a[1]){u.label=a[1],a=l;break}if(a&&u.label<a[2]){u.label=a[2],u.ops.push(l);break}a[2]&&u.ops.pop(),u.trys.pop();continue}l=r.call(e,u)}catch(e){l=[6,e],n=0}finally{t=a=0}if(5&l[0])throw l[1];return{value:l[0]?l[1]:void 0,done:!0}}([l,i])}}}var y=Object.create?function(e,r,t,n){void 0===n&&(n=t);var a=Object.getOwnPropertyDescriptor(r,t);a&&!("get"in a?!r.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return r[t]}}),Object.defineProperty(e,n,a)}:function(e,r,t,n){void 0===n&&(n=t),e[n]=r[t]};function v(e,r){for(var t in e)"default"===t||Object.prototype.hasOwnProperty.call(r,t)||y(r,e,t)}function h(e){var r="function"==typeof Symbol&&Symbol.iterator,t=r&&e[r],n=0;if(t)return t.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(r?"Object is not iterable.":"Symbol.iterator is not defined.")}function _(e,r){var t="function"==typeof Symbol&&e[Symbol.iterator];if(!t)return e;var n,a,o=t.call(e),u=[];try{for(;(void 0===r||r-- >0)&&!(n=o.next()).done;)u.push(n.value)}catch(e){a={error:e}}finally{try{n&&!n.done&&(t=o.return)&&t.call(o)}finally{if(a)throw a.error}}return u}function g(){for(var e=[],r=0;r<arguments.length;r++)e=e.concat(_(arguments[r]));return e}function S(){for(var e=0,r=0,t=arguments.length;r<t;r++)e+=arguments[r].length;var n=Array(e),a=0;for(r=0;r<t;r++)for(var o=arguments[r],u=0,l=o.length;u<l;u++,a++)n[a]=o[u];return n}function w(e,r,t){if(t||2===arguments.length)for(var n,a=0,o=r.length;a<o;a++)!n&&a in r||(n||(n=Array.prototype.slice.call(r,0,a)),n[a]=r[a]);return e.concat(n||Array.prototype.slice.call(r))}function E(e){return this instanceof E?(this.v=e,this):new E(e)}function M(e,r,t){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var n,a=t.apply(e,r||[]),o=[];return n={},u("next"),u("throw"),u("return"),n[Symbol.asyncIterator]=function(){return this},n;function u(e){a[e]&&(n[e]=function(r){return new Promise((function(t,n){o.push([e,r,t,n])>1||l(e,r)}))})}function l(e,r){try{(t=a[e](r)).value instanceof E?Promise.resolve(t.value.v).then(i,c):s(o[0][2],t)}catch(e){s(o[0][3],e)}var t}function i(e){l("next",e)}function c(e){l("throw",e)}function s(e,r){e(r),o.shift(),o.length&&l(o[0][0],o[0][1])}}function D(e){var r,t;return r={},n("next"),n("throw",(function(e){throw e})),n("return"),r[Symbol.iterator]=function(){return this},r;function n(n,a){r[n]=e[n]?function(r){return(t=!t)?{value:E(e[n](r)),done:!1}:a?a(r):r}:a}}function T(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var r,t=e[Symbol.asyncIterator];return t?t.call(e):(e=h(e),r={},n("next"),n("throw"),n("return"),r[Symbol.asyncIterator]=function(){return this},r);function n(t){r[t]=e[t]&&function(r){return new Promise((function(n,a){(function(e,r,t,n){Promise.resolve(n).then((function(r){e({value:r,done:t})}),r)})(n,a,(r=e[t](r)).done,r.value)}))}}}function x(e,r){return Object.defineProperty?Object.defineProperty(e,"raw",{value:r}):e.raw=r,e}var P=Object.create?function(e,r){Object.defineProperty(e,"default",{enumerable:!0,value:r})}:function(e,r){e.default=r};function j(e){if(e&&e.__esModule)return e;var r={};if(null!=e)for(var t in e)"default"!==t&&Object.prototype.hasOwnProperty.call(e,t)&&y(r,e,t);return P(r,e),r}function O(e){return e&&e.__esModule?e:{default:e}}function R(e,r,t,n){if("a"===t&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof r?e!==r||!n:!r.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===t?n:"a"===t?n.call(e):n?n.value:r.get(e)}function k(e,r,t,n,a){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!a)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof r?e!==r||!a:!r.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?a.call(e,t):a?a.value=t:r.set(e,t),t}function L(e,r){if(null===r||"object"!=typeof r&&"function"!=typeof r)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?r===e:e.has(r)}function V(e,r,t){if(null!=r){if("object"!=typeof r&&"function"!=typeof r)throw new TypeError("Object expected.");var n;if(t){if(!Symbol.asyncDispose)throw new TypeError("Symbol.asyncDispose is not defined.");n=r[Symbol.asyncDispose]}if(void 0===n){if(!Symbol.dispose)throw new TypeError("Symbol.dispose is not defined.");n=r[Symbol.dispose]}if("function"!=typeof n)throw new TypeError("Object not disposable.");e.stack.push({value:r,dispose:n,async:t})}else t&&e.stack.push({async:!0});return r}var A="function"==typeof SuppressedError?SuppressedError:function(e,r,t){var n=new Error(t);return n.name="SuppressedError",n.error=e,n.suppressed=r,n};function C(e){function r(r){e.error=e.hasError?new A(r,e.error,"An error was suppressed during disposal."):r,e.hasError=!0}return function t(){for(;e.stack.length;){var n=e.stack.pop();try{var a=n.dispose&&n.dispose.call(n.value);if(n.async)return Promise.resolve(a).then(t,(function(e){return r(e),t()}))}catch(e){r(e)}}if(e.hasError)throw e.error}()}const I={__extends:a,__assign:o,__rest:u,__decorate:l,__param:i,__metadata:p,__awaiter:m,__generator:b,__createBinding:y,__exportStar:v,__values:h,__read:_,__spread:g,__spreadArrays:S,__spreadArray:w,__await:E,__asyncGenerator:M,__asyncDelegator:D,__asyncValues:T,__makeTemplateObject:x,__importStar:j,__importDefault:O,__classPrivateFieldGet:R,__classPrivateFieldSet:k,__classPrivateFieldIn:L,__addDisposableResource:V,__disposeResources:C}}},n={};function a(e){var r=n[e];if(void 0!==r)return r.exports;var o=n[e]={exports:{}};return t[e](o,o.exports,a),o.exports}a.d=(e,r)=>{for(var t in r)a.o(r,t)&&!a.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},a.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{var e=o;Object.defineProperty(e,"__esModule",{value:!0}),e.Slider=void 0;const r=a(901);var t=a(901);Object.defineProperty(e,"Slider",{enumerable:!0,get:function(){return t.Slider}}),e.default=r.Slider})(),o})()));
|
package/package.json
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@nimbus-ds/slider",
|
|
3
|
+
"version": "1.0.0-rc.1",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"files": [
|
|
7
|
+
"dist",
|
|
8
|
+
"README.md",
|
|
9
|
+
"CHANGELOG.md"
|
|
10
|
+
],
|
|
11
|
+
"sideEffects": false,
|
|
12
|
+
"scripts": {
|
|
13
|
+
"build": "yarn g:webpack",
|
|
14
|
+
"clean": "rm -rf dist",
|
|
15
|
+
"version": "yarn version"
|
|
16
|
+
},
|
|
17
|
+
"dependencies": {
|
|
18
|
+
"@nimbus-ds/box": "^4.3.2",
|
|
19
|
+
"@nimbus-ds/input": "^2.6.0",
|
|
20
|
+
"@nimbus-ds/text": "^6.6.0"
|
|
21
|
+
},
|
|
22
|
+
"peerDependencies": {
|
|
23
|
+
"react": "^16.8 || ^17.0 || ^18.0",
|
|
24
|
+
"react-dom": "^16.8 || ^17.0 || ^18.0"
|
|
25
|
+
},
|
|
26
|
+
"homepage": "https://nimbus.nuvemshop.com.br/documentation",
|
|
27
|
+
"repository": {
|
|
28
|
+
"type": "git",
|
|
29
|
+
"url": "git+https://github.com/TiendaNube/nimbus-design-system.git"
|
|
30
|
+
},
|
|
31
|
+
"bugs": {
|
|
32
|
+
"url": "https://github.com/TiendaNube/nimbus-design-system/issues"
|
|
33
|
+
},
|
|
34
|
+
"devDependencies": {
|
|
35
|
+
"@nimbus-ds/webpack": "^1.7.0"
|
|
36
|
+
}
|
|
37
|
+
}
|