@react-spectrum/color 3.0.0-nightly.3100 → 3.0.0-nightly.3120
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/dist/main.css +1 -1
- package/dist/main.js +183 -183
- package/dist/module.js +181 -181
- package/package.json +20 -20
package/dist/module.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import "./main.css";
|
|
2
|
-
import {dimensionValue as $
|
|
3
|
-
import $
|
|
4
|
-
import {useColorWheel as $
|
|
5
|
-
import {useColorWheelState as $
|
|
6
|
-
import {useFocusRing as $
|
|
7
|
-
import {useProviderProps as $
|
|
8
|
-
import {useResizeObserver as $
|
|
9
|
-
import {Flex as $
|
|
10
|
-
import {Label as $
|
|
11
|
-
import {useFocusVisible as $
|
|
12
|
-
import {useLocale as $
|
|
13
|
-
import {TextFieldBase as $
|
|
2
|
+
import {dimensionValue as $kF0Zw$dimensionValue, useStyleProps as $kF0Zw$useStyleProps, useFocusableRef as $kF0Zw$useFocusableRef, classNames as $kF0Zw$classNames} from "@react-spectrum/utils";
|
|
3
|
+
import $kF0Zw$react, {useRef as $kF0Zw$useRef, useState as $kF0Zw$useState, useCallback as $kF0Zw$useCallback, useEffect as $kF0Zw$useEffect} from "react";
|
|
4
|
+
import {useColorWheel as $kF0Zw$useColorWheel, useColorSlider as $kF0Zw$useColorSlider, useColorField as $kF0Zw$useColorField} from "@react-aria/color";
|
|
5
|
+
import {useColorWheelState as $kF0Zw$useColorWheelState, useColorSliderState as $kF0Zw$useColorSliderState, useColorFieldState as $kF0Zw$useColorFieldState} from "@react-stately/color";
|
|
6
|
+
import {useFocusRing as $kF0Zw$useFocusRing} from "@react-aria/focus";
|
|
7
|
+
import {useProviderProps as $kF0Zw$useProviderProps} from "@react-spectrum/provider";
|
|
8
|
+
import {useResizeObserver as $kF0Zw$useResizeObserver, useId as $kF0Zw$useId} from "@react-aria/utils";
|
|
9
|
+
import {Flex as $kF0Zw$Flex} from "@react-spectrum/layout";
|
|
10
|
+
import {Label as $kF0Zw$Label} from "@react-spectrum/label";
|
|
11
|
+
import {useFocusVisible as $kF0Zw$useFocusVisible, useFocus as $kF0Zw$useFocus} from "@react-aria/interactions";
|
|
12
|
+
import {useLocale as $kF0Zw$useLocale} from "@react-aria/i18n";
|
|
13
|
+
import {TextFieldBase as $kF0Zw$TextFieldBase} from "@react-spectrum/textfield";
|
|
14
14
|
|
|
15
15
|
function $parcel$interopDefault(a) {
|
|
16
16
|
return a && a.__esModule ? a.default : a;
|
|
@@ -18,138 +18,138 @@ function $parcel$interopDefault(a) {
|
|
|
18
18
|
function $parcel$export(e, n, v, s) {
|
|
19
19
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
20
20
|
}
|
|
21
|
-
var $
|
|
21
|
+
var $3aac1c27203f04b5$exports = {};
|
|
22
22
|
|
|
23
|
-
$parcel$export($
|
|
23
|
+
$parcel$export($3aac1c27203f04b5$exports, "ColorWheel", () => $3aac1c27203f04b5$export$f80663f808113381);
|
|
24
24
|
|
|
25
25
|
|
|
26
26
|
|
|
27
|
-
var $
|
|
27
|
+
var $9d103974e3e19727$exports = {};
|
|
28
28
|
|
|
29
|
-
$parcel$export($
|
|
30
|
-
$parcel$export($
|
|
31
|
-
$parcel$export($
|
|
32
|
-
$parcel$export($
|
|
33
|
-
$parcel$export($
|
|
34
|
-
var $
|
|
35
|
-
var $
|
|
36
|
-
var $
|
|
37
|
-
var $
|
|
38
|
-
var $
|
|
39
|
-
$
|
|
40
|
-
$
|
|
41
|
-
$
|
|
42
|
-
$
|
|
43
|
-
$
|
|
29
|
+
$parcel$export($9d103974e3e19727$exports, "spectrum-ColorHandle", () => $9d103974e3e19727$export$cd9afaa621b6216f, (v) => $9d103974e3e19727$export$cd9afaa621b6216f = v);
|
|
30
|
+
$parcel$export($9d103974e3e19727$exports, "is-focused", () => $9d103974e3e19727$export$e7dc768d35940237, (v) => $9d103974e3e19727$export$e7dc768d35940237 = v);
|
|
31
|
+
$parcel$export($9d103974e3e19727$exports, "focus-ring", () => $9d103974e3e19727$export$f39a09f249340e2a, (v) => $9d103974e3e19727$export$f39a09f249340e2a = v);
|
|
32
|
+
$parcel$export($9d103974e3e19727$exports, "is-disabled", () => $9d103974e3e19727$export$d35bc1e505d1ebbf, (v) => $9d103974e3e19727$export$d35bc1e505d1ebbf = v);
|
|
33
|
+
$parcel$export($9d103974e3e19727$exports, "spectrum-ColorHandle-color", () => $9d103974e3e19727$export$afe4c366ed4e659c, (v) => $9d103974e3e19727$export$afe4c366ed4e659c = v);
|
|
34
|
+
var $9d103974e3e19727$export$cd9afaa621b6216f;
|
|
35
|
+
var $9d103974e3e19727$export$e7dc768d35940237;
|
|
36
|
+
var $9d103974e3e19727$export$f39a09f249340e2a;
|
|
37
|
+
var $9d103974e3e19727$export$d35bc1e505d1ebbf;
|
|
38
|
+
var $9d103974e3e19727$export$afe4c366ed4e659c;
|
|
39
|
+
$9d103974e3e19727$export$cd9afaa621b6216f = "spectrum-ColorHandle_5a9f41";
|
|
40
|
+
$9d103974e3e19727$export$e7dc768d35940237 = "is-focused_5a9f41";
|
|
41
|
+
$9d103974e3e19727$export$f39a09f249340e2a = "focus-ring_5a9f41";
|
|
42
|
+
$9d103974e3e19727$export$d35bc1e505d1ebbf = "is-disabled_5a9f41";
|
|
43
|
+
$9d103974e3e19727$export$afe4c366ed4e659c = "spectrum-ColorHandle-color_5a9f41";
|
|
44
44
|
|
|
45
45
|
|
|
46
|
-
var $
|
|
46
|
+
var $f3cdcbdb4b87f010$exports = {};
|
|
47
47
|
|
|
48
|
-
$parcel$export($
|
|
49
|
-
$parcel$export($
|
|
50
|
-
$parcel$export($
|
|
51
|
-
$parcel$export($
|
|
52
|
-
$parcel$export($
|
|
53
|
-
var $
|
|
54
|
-
var $
|
|
55
|
-
var $
|
|
56
|
-
var $
|
|
57
|
-
var $
|
|
58
|
-
$
|
|
59
|
-
$
|
|
60
|
-
$
|
|
61
|
-
$
|
|
62
|
-
$
|
|
48
|
+
$parcel$export($f3cdcbdb4b87f010$exports, "spectrum-ColorLoupe", () => $f3cdcbdb4b87f010$export$88d6ed2576b21809, (v) => $f3cdcbdb4b87f010$export$88d6ed2576b21809 = v);
|
|
49
|
+
$parcel$export($f3cdcbdb4b87f010$exports, "is-open", () => $f3cdcbdb4b87f010$export$a9781837241c946d, (v) => $f3cdcbdb4b87f010$export$a9781837241c946d = v);
|
|
50
|
+
$parcel$export($f3cdcbdb4b87f010$exports, "spectrum-ColorLoupe-outer", () => $f3cdcbdb4b87f010$export$d6ad38291e8aca9c, (v) => $f3cdcbdb4b87f010$export$d6ad38291e8aca9c = v);
|
|
51
|
+
$parcel$export($f3cdcbdb4b87f010$exports, "spectrum-ColorLoupe-inner-background", () => $f3cdcbdb4b87f010$export$397af82b48750fe5, (v) => $f3cdcbdb4b87f010$export$397af82b48750fe5 = v);
|
|
52
|
+
$parcel$export($f3cdcbdb4b87f010$exports, "spectrum-ColorLoupe-inner-checker", () => $f3cdcbdb4b87f010$export$f9a2a02e0b271024, (v) => $f3cdcbdb4b87f010$export$f9a2a02e0b271024 = v);
|
|
53
|
+
var $f3cdcbdb4b87f010$export$88d6ed2576b21809;
|
|
54
|
+
var $f3cdcbdb4b87f010$export$a9781837241c946d;
|
|
55
|
+
var $f3cdcbdb4b87f010$export$d6ad38291e8aca9c;
|
|
56
|
+
var $f3cdcbdb4b87f010$export$397af82b48750fe5;
|
|
57
|
+
var $f3cdcbdb4b87f010$export$f9a2a02e0b271024;
|
|
58
|
+
$f3cdcbdb4b87f010$export$88d6ed2576b21809 = "spectrum-ColorLoupe_c818a8";
|
|
59
|
+
$f3cdcbdb4b87f010$export$a9781837241c946d = "is-open_c818a8";
|
|
60
|
+
$f3cdcbdb4b87f010$export$d6ad38291e8aca9c = "spectrum-ColorLoupe-outer_c818a8";
|
|
61
|
+
$f3cdcbdb4b87f010$export$397af82b48750fe5 = "spectrum-ColorLoupe-inner-background_c818a8";
|
|
62
|
+
$f3cdcbdb4b87f010$export$f9a2a02e0b271024 = "spectrum-ColorLoupe-inner-checker_c818a8";
|
|
63
63
|
|
|
64
64
|
|
|
65
65
|
|
|
66
|
-
function $
|
|
66
|
+
function $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc(props) {
|
|
67
67
|
let { value: value , isDisabled: isDisabled , isDragging: isDragging , isFocused: isFocused , children: children , className: className = '' , ...otherProps } = props;
|
|
68
|
-
let patternId = $
|
|
68
|
+
let patternId = $kF0Zw$useId();
|
|
69
69
|
let valueCSS = value.toString('css');
|
|
70
|
-
return(/*#__PURE__*/ $
|
|
71
|
-
className: $
|
|
70
|
+
return(/*#__PURE__*/ $kF0Zw$react.createElement("div", {
|
|
71
|
+
className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($9d103974e3e19727$exports)), 'spectrum-ColorHandle', {
|
|
72
72
|
'is-focused': isFocused,
|
|
73
73
|
'is-disabled': isDisabled
|
|
74
74
|
}) + ' ' + className,
|
|
75
75
|
...otherProps
|
|
76
|
-
}, /*#__PURE__*/ $
|
|
77
|
-
className: $
|
|
76
|
+
}, /*#__PURE__*/ $kF0Zw$react.createElement("div", {
|
|
77
|
+
className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($9d103974e3e19727$exports)), 'spectrum-ColorHandle-color'),
|
|
78
78
|
style: {
|
|
79
79
|
backgroundColor: valueCSS
|
|
80
80
|
}
|
|
81
|
-
}), /*#__PURE__*/ $
|
|
82
|
-
className: $
|
|
81
|
+
}), /*#__PURE__*/ $kF0Zw$react.createElement("svg", {
|
|
82
|
+
className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports)), 'spectrum-ColorLoupe', {
|
|
83
83
|
'is-open': isDragging
|
|
84
84
|
}),
|
|
85
85
|
"aria-hidden": "true"
|
|
86
|
-
}, /*#__PURE__*/ $
|
|
86
|
+
}, /*#__PURE__*/ $kF0Zw$react.createElement("pattern", {
|
|
87
87
|
id: patternId,
|
|
88
88
|
x: "0",
|
|
89
89
|
y: "0",
|
|
90
90
|
width: "16",
|
|
91
91
|
height: "16",
|
|
92
92
|
patternUnits: "userSpaceOnUse"
|
|
93
|
-
}, /*#__PURE__*/ $
|
|
94
|
-
className: $
|
|
93
|
+
}, /*#__PURE__*/ $kF0Zw$react.createElement("rect", {
|
|
94
|
+
className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports)), 'spectrum-ColorLoupe-inner-background'),
|
|
95
95
|
x: "0",
|
|
96
96
|
y: "0",
|
|
97
97
|
width: "16",
|
|
98
98
|
height: "16"
|
|
99
|
-
}), /*#__PURE__*/ $
|
|
100
|
-
className: $
|
|
99
|
+
}), /*#__PURE__*/ $kF0Zw$react.createElement("rect", {
|
|
100
|
+
className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports)), 'spectrum-ColorLoupe-inner-checker'),
|
|
101
101
|
x: "0",
|
|
102
102
|
y: "0",
|
|
103
103
|
width: "8",
|
|
104
104
|
height: "8"
|
|
105
|
-
}), /*#__PURE__*/ $
|
|
106
|
-
className: $
|
|
105
|
+
}), /*#__PURE__*/ $kF0Zw$react.createElement("rect", {
|
|
106
|
+
className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports)), 'spectrum-ColorLoupe-inner-checker'),
|
|
107
107
|
x: "8",
|
|
108
108
|
y: "8",
|
|
109
109
|
width: "8",
|
|
110
110
|
height: "8"
|
|
111
|
-
})), /*#__PURE__*/ $
|
|
112
|
-
className: $
|
|
111
|
+
})), /*#__PURE__*/ $kF0Zw$react.createElement("path", {
|
|
112
|
+
className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports)), 'spectrum-ColorLoupe-inner'),
|
|
113
113
|
d: "M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z",
|
|
114
114
|
fill: `url(#${patternId})`
|
|
115
|
-
}), /*#__PURE__*/ $
|
|
116
|
-
className: $
|
|
115
|
+
}), /*#__PURE__*/ $kF0Zw$react.createElement("path", {
|
|
116
|
+
className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports)), 'spectrum-ColorLoupe-inner'),
|
|
117
117
|
d: "M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z",
|
|
118
118
|
fill: valueCSS
|
|
119
|
-
}), /*#__PURE__*/ $
|
|
120
|
-
className: $
|
|
119
|
+
}), /*#__PURE__*/ $kF0Zw$react.createElement("path", {
|
|
120
|
+
className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports)), 'spectrum-ColorLoupe-outer'),
|
|
121
121
|
d: "M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
|
|
122
122
|
})), children));
|
|
123
123
|
}
|
|
124
124
|
|
|
125
125
|
|
|
126
126
|
|
|
127
|
-
var $
|
|
127
|
+
var $f60625fffea2b12e$exports = {};
|
|
128
128
|
|
|
129
|
-
$parcel$export($
|
|
130
|
-
$parcel$export($
|
|
131
|
-
$parcel$export($
|
|
132
|
-
$parcel$export($
|
|
133
|
-
$parcel$export($
|
|
134
|
-
$parcel$export($
|
|
135
|
-
$parcel$export($
|
|
136
|
-
$parcel$export($
|
|
137
|
-
var $
|
|
138
|
-
var $
|
|
139
|
-
var $
|
|
140
|
-
var $
|
|
141
|
-
var $
|
|
142
|
-
var $
|
|
143
|
-
var $
|
|
144
|
-
var $
|
|
145
|
-
$
|
|
146
|
-
$
|
|
147
|
-
$
|
|
148
|
-
$
|
|
149
|
-
$
|
|
150
|
-
$
|
|
151
|
-
$
|
|
152
|
-
$
|
|
129
|
+
$parcel$export($f60625fffea2b12e$exports, "spectrum-ColorWheel", () => $f60625fffea2b12e$export$b70a5ca28702fbc6, (v) => $f60625fffea2b12e$export$b70a5ca28702fbc6 = v);
|
|
130
|
+
$parcel$export($f60625fffea2b12e$exports, "is-focused", () => $f60625fffea2b12e$export$e7dc768d35940237, (v) => $f60625fffea2b12e$export$e7dc768d35940237 = v);
|
|
131
|
+
$parcel$export($f60625fffea2b12e$exports, "spectrum-ColorWheel-handle", () => $f60625fffea2b12e$export$4cd23920eb8ac056, (v) => $f60625fffea2b12e$export$4cd23920eb8ac056 = v);
|
|
132
|
+
$parcel$export($f60625fffea2b12e$exports, "spectrum-ColorWheel-slider", () => $f60625fffea2b12e$export$f476ddda713d62b, (v) => $f60625fffea2b12e$export$f476ddda713d62b = v);
|
|
133
|
+
$parcel$export($f60625fffea2b12e$exports, "is-disabled", () => $f60625fffea2b12e$export$d35bc1e505d1ebbf, (v) => $f60625fffea2b12e$export$d35bc1e505d1ebbf = v);
|
|
134
|
+
$parcel$export($f60625fffea2b12e$exports, "is-dragged", () => $f60625fffea2b12e$export$8778c911bed6c759, (v) => $f60625fffea2b12e$export$8778c911bed6c759 = v);
|
|
135
|
+
$parcel$export($f60625fffea2b12e$exports, "spectrum-ColorWheel-gradient", () => $f60625fffea2b12e$export$9afaa791d7500a9b, (v) => $f60625fffea2b12e$export$9afaa791d7500a9b = v);
|
|
136
|
+
$parcel$export($f60625fffea2b12e$exports, "spectrum-ColorWheel-segment", () => $f60625fffea2b12e$export$ada9fbffdaa4f10, (v) => $f60625fffea2b12e$export$ada9fbffdaa4f10 = v);
|
|
137
|
+
var $f60625fffea2b12e$export$b70a5ca28702fbc6;
|
|
138
|
+
var $f60625fffea2b12e$export$e7dc768d35940237;
|
|
139
|
+
var $f60625fffea2b12e$export$4cd23920eb8ac056;
|
|
140
|
+
var $f60625fffea2b12e$export$f476ddda713d62b;
|
|
141
|
+
var $f60625fffea2b12e$export$d35bc1e505d1ebbf;
|
|
142
|
+
var $f60625fffea2b12e$export$8778c911bed6c759;
|
|
143
|
+
var $f60625fffea2b12e$export$9afaa791d7500a9b;
|
|
144
|
+
var $f60625fffea2b12e$export$ada9fbffdaa4f10;
|
|
145
|
+
$f60625fffea2b12e$export$b70a5ca28702fbc6 = "spectrum-ColorWheel_31462a";
|
|
146
|
+
$f60625fffea2b12e$export$e7dc768d35940237 = "is-focused_31462a";
|
|
147
|
+
$f60625fffea2b12e$export$4cd23920eb8ac056 = "spectrum-ColorWheel-handle_31462a";
|
|
148
|
+
$f60625fffea2b12e$export$f476ddda713d62b = "spectrum-ColorWheel-slider_31462a";
|
|
149
|
+
$f60625fffea2b12e$export$d35bc1e505d1ebbf = "is-disabled_31462a";
|
|
150
|
+
$f60625fffea2b12e$export$8778c911bed6c759 = "is-dragged_31462a";
|
|
151
|
+
$f60625fffea2b12e$export$9afaa791d7500a9b = "spectrum-ColorWheel-gradient_31462a";
|
|
152
|
+
$f60625fffea2b12e$export$ada9fbffdaa4f10 = "spectrum-ColorWheel-segment_31462a";
|
|
153
153
|
|
|
154
154
|
|
|
155
155
|
|
|
@@ -157,17 +157,17 @@ $3be09cf107a19f45$export$ada9fbffdaa4f10 = "spectrum-ColorWheel-segment_31462a";
|
|
|
157
157
|
|
|
158
158
|
|
|
159
159
|
|
|
160
|
-
const $
|
|
161
|
-
function $
|
|
162
|
-
props = $
|
|
160
|
+
const $3aac1c27203f04b5$var$WHEEL_THICKNESS = 24;
|
|
161
|
+
function $3aac1c27203f04b5$var$ColorWheel(props, ref) {
|
|
162
|
+
props = $kF0Zw$useProviderProps(props);
|
|
163
163
|
let { isDisabled: isDisabled } = props;
|
|
164
|
-
let size = props.size && $
|
|
165
|
-
let { styleProps: styleProps } = $
|
|
166
|
-
let inputRef = $
|
|
167
|
-
let containerRef = $
|
|
168
|
-
let [wheelRadius, setWheelRadius] = $
|
|
169
|
-
let [wheelThickness, setWheelThickness] = $
|
|
170
|
-
let resizeHandler = $
|
|
164
|
+
let size = props.size && $kF0Zw$dimensionValue(props.size);
|
|
165
|
+
let { styleProps: styleProps } = $kF0Zw$useStyleProps(props);
|
|
166
|
+
let inputRef = $kF0Zw$useRef(null);
|
|
167
|
+
let containerRef = $kF0Zw$useFocusableRef(ref, inputRef);
|
|
168
|
+
let [wheelRadius, setWheelRadius] = $kF0Zw$useState(null);
|
|
169
|
+
let [wheelThickness, setWheelThickness] = $kF0Zw$useState($3aac1c27203f04b5$var$WHEEL_THICKNESS);
|
|
170
|
+
let resizeHandler = $kF0Zw$useCallback(()=>{
|
|
171
171
|
if (containerRef.current) {
|
|
172
172
|
setWheelRadius(containerRef.current.offsetWidth / 2);
|
|
173
173
|
let thickness = window.getComputedStyle(containerRef.current).getPropertyValue('--spectrum-colorwheel-track-thickness');
|
|
@@ -178,26 +178,26 @@ function $ee47bd58c80bd295$var$ColorWheel(props, ref) {
|
|
|
178
178
|
setWheelRadius,
|
|
179
179
|
setWheelThickness
|
|
180
180
|
]);
|
|
181
|
-
$
|
|
181
|
+
$kF0Zw$useEffect(()=>{
|
|
182
182
|
// the size observer's fallback to the window resize event doesn't fire on mount
|
|
183
183
|
if (wheelRadius == null) resizeHandler();
|
|
184
184
|
}, [
|
|
185
185
|
wheelRadius,
|
|
186
186
|
resizeHandler
|
|
187
187
|
]);
|
|
188
|
-
$
|
|
188
|
+
$kF0Zw$useResizeObserver({
|
|
189
189
|
ref: containerRef,
|
|
190
190
|
onResize: resizeHandler
|
|
191
191
|
});
|
|
192
|
-
let state = $
|
|
193
|
-
let { trackProps: trackProps , inputProps: inputProps , thumbProps: thumbProps } = $
|
|
192
|
+
let state = $kF0Zw$useColorWheelState(props);
|
|
193
|
+
let { trackProps: trackProps , inputProps: inputProps , thumbProps: thumbProps } = $kF0Zw$useColorWheel({
|
|
194
194
|
...props,
|
|
195
195
|
innerRadius: wheelRadius - wheelThickness,
|
|
196
196
|
outerRadius: wheelRadius
|
|
197
197
|
}, state, inputRef);
|
|
198
|
-
let { focusProps: focusProps , isFocusVisible: isFocusVisible } = $
|
|
199
|
-
return(/*#__PURE__*/ $
|
|
200
|
-
className: $
|
|
198
|
+
let { focusProps: focusProps , isFocusVisible: isFocusVisible } = $kF0Zw$useFocusRing();
|
|
199
|
+
return(/*#__PURE__*/ $kF0Zw$react.createElement("div", {
|
|
200
|
+
className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($f60625fffea2b12e$exports)), 'spectrum-ColorWheel', {
|
|
201
201
|
'is-disabled': isDisabled
|
|
202
202
|
}, styleProps.className),
|
|
203
203
|
ref: containerRef,
|
|
@@ -208,62 +208,62 @@ function $ee47bd58c80bd295$var$ColorWheel(props, ref) {
|
|
|
208
208
|
'width': size,
|
|
209
209
|
'height': size
|
|
210
210
|
}
|
|
211
|
-
}, /*#__PURE__*/ $
|
|
211
|
+
}, /*#__PURE__*/ $kF0Zw$react.createElement("div", {
|
|
212
212
|
...trackProps,
|
|
213
|
-
className: $
|
|
214
|
-
}), /*#__PURE__*/ $
|
|
213
|
+
className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($f60625fffea2b12e$exports)), 'spectrum-ColorWheel-gradient')
|
|
214
|
+
}), /*#__PURE__*/ $kF0Zw$react.createElement($3a90e89d07d7bbd5$export$a3cc47cee1c1ccc, {
|
|
215
215
|
value: state.getDisplayColor(),
|
|
216
216
|
isFocused: isFocusVisible,
|
|
217
217
|
isDisabled: isDisabled,
|
|
218
218
|
isDragging: state.isDragging,
|
|
219
|
-
className: $
|
|
219
|
+
className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($f60625fffea2b12e$exports)), 'spectrum-ColorWheel-handle'),
|
|
220
220
|
...thumbProps
|
|
221
|
-
}, /*#__PURE__*/ $
|
|
221
|
+
}, /*#__PURE__*/ $kF0Zw$react.createElement("input", {
|
|
222
222
|
...focusProps,
|
|
223
|
-
className: $
|
|
223
|
+
className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($f60625fffea2b12e$exports)), 'spectrum-ColorWheel-slider'),
|
|
224
224
|
...inputProps,
|
|
225
225
|
ref: inputRef
|
|
226
226
|
}))));
|
|
227
227
|
}
|
|
228
228
|
/**
|
|
229
229
|
* ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
|
|
230
|
-
*/ let $
|
|
230
|
+
*/ let $3aac1c27203f04b5$export$f80663f808113381 = /*#__PURE__*/ $kF0Zw$react.forwardRef($3aac1c27203f04b5$var$ColorWheel);
|
|
231
231
|
|
|
232
232
|
|
|
233
|
-
var $
|
|
233
|
+
var $3870e4ce67ed7ee1$exports = {};
|
|
234
234
|
|
|
235
|
-
$parcel$export($
|
|
235
|
+
$parcel$export($3870e4ce67ed7ee1$exports, "ColorSlider", () => $3870e4ce67ed7ee1$export$44fd664bcca5b6fb);
|
|
236
236
|
|
|
237
237
|
|
|
238
238
|
|
|
239
239
|
|
|
240
240
|
|
|
241
|
-
var $
|
|
241
|
+
var $670e80c7e5915fb5$exports = {};
|
|
242
242
|
|
|
243
|
-
$parcel$export($
|
|
244
|
-
$parcel$export($
|
|
245
|
-
$parcel$export($
|
|
246
|
-
$parcel$export($
|
|
247
|
-
$parcel$export($
|
|
248
|
-
$parcel$export($
|
|
249
|
-
$parcel$export($
|
|
250
|
-
$parcel$export($
|
|
251
|
-
var $
|
|
252
|
-
var $
|
|
253
|
-
var $
|
|
254
|
-
var $
|
|
255
|
-
var $
|
|
256
|
-
var $
|
|
257
|
-
var $
|
|
258
|
-
var $
|
|
259
|
-
$
|
|
260
|
-
$
|
|
261
|
-
$
|
|
262
|
-
$
|
|
263
|
-
$
|
|
264
|
-
$
|
|
265
|
-
$
|
|
266
|
-
$
|
|
243
|
+
$parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider", () => $670e80c7e5915fb5$export$a5f8b0989b27a604, (v) => $670e80c7e5915fb5$export$a5f8b0989b27a604 = v);
|
|
244
|
+
$parcel$export($670e80c7e5915fb5$exports, "is-focused", () => $670e80c7e5915fb5$export$e7dc768d35940237, (v) => $670e80c7e5915fb5$export$e7dc768d35940237 = v);
|
|
245
|
+
$parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-handle", () => $670e80c7e5915fb5$export$8c273ba92fabe1f1, (v) => $670e80c7e5915fb5$export$8c273ba92fabe1f1 = v);
|
|
246
|
+
$parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-slider", () => $670e80c7e5915fb5$export$2f08b72944af536, (v) => $670e80c7e5915fb5$export$2f08b72944af536 = v);
|
|
247
|
+
$parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-container--horizontal", () => $670e80c7e5915fb5$export$33e97914f6746614, (v) => $670e80c7e5915fb5$export$33e97914f6746614 = v);
|
|
248
|
+
$parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-container--vertical", () => $670e80c7e5915fb5$export$cd1c093289104c66, (v) => $670e80c7e5915fb5$export$cd1c093289104c66 = v);
|
|
249
|
+
$parcel$export($670e80c7e5915fb5$exports, "is-disabled", () => $670e80c7e5915fb5$export$d35bc1e505d1ebbf, (v) => $670e80c7e5915fb5$export$d35bc1e505d1ebbf = v);
|
|
250
|
+
$parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider--vertical", () => $670e80c7e5915fb5$export$83dcf61b398bfaf1, (v) => $670e80c7e5915fb5$export$83dcf61b398bfaf1 = v);
|
|
251
|
+
var $670e80c7e5915fb5$export$a5f8b0989b27a604;
|
|
252
|
+
var $670e80c7e5915fb5$export$e7dc768d35940237;
|
|
253
|
+
var $670e80c7e5915fb5$export$8c273ba92fabe1f1;
|
|
254
|
+
var $670e80c7e5915fb5$export$2f08b72944af536;
|
|
255
|
+
var $670e80c7e5915fb5$export$33e97914f6746614;
|
|
256
|
+
var $670e80c7e5915fb5$export$cd1c093289104c66;
|
|
257
|
+
var $670e80c7e5915fb5$export$d35bc1e505d1ebbf;
|
|
258
|
+
var $670e80c7e5915fb5$export$83dcf61b398bfaf1;
|
|
259
|
+
$670e80c7e5915fb5$export$a5f8b0989b27a604 = "spectrum-ColorSlider_a5bb06";
|
|
260
|
+
$670e80c7e5915fb5$export$e7dc768d35940237 = "is-focused_a5bb06";
|
|
261
|
+
$670e80c7e5915fb5$export$8c273ba92fabe1f1 = "spectrum-ColorSlider-handle_a5bb06";
|
|
262
|
+
$670e80c7e5915fb5$export$2f08b72944af536 = "spectrum-ColorSlider-slider_a5bb06";
|
|
263
|
+
$670e80c7e5915fb5$export$33e97914f6746614 = "spectrum-ColorSlider-container--horizontal_a5bb06";
|
|
264
|
+
$670e80c7e5915fb5$export$cd1c093289104c66 = "spectrum-ColorSlider-container--vertical_a5bb06";
|
|
265
|
+
$670e80c7e5915fb5$export$d35bc1e505d1ebbf = "is-disabled_a5bb06";
|
|
266
|
+
$670e80c7e5915fb5$export$83dcf61b398bfaf1 = "spectrum-ColorSlider--vertical_a5bb06";
|
|
267
267
|
|
|
268
268
|
|
|
269
269
|
|
|
@@ -271,16 +271,16 @@ $e37e067892fdabf2$export$83dcf61b398bfaf1 = "spectrum-ColorSlider--vertical_a5bb
|
|
|
271
271
|
|
|
272
272
|
|
|
273
273
|
|
|
274
|
-
function $
|
|
275
|
-
props = $
|
|
274
|
+
function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
|
|
275
|
+
props = $kF0Zw$useProviderProps(props);
|
|
276
276
|
let { isDisabled: isDisabled , channel: channel , orientation: orientation , label: label , showValueLabel: showValueLabel , 'aria-label': ariaLabel } = props;
|
|
277
277
|
let vertical = orientation === 'vertical';
|
|
278
|
-
let { styleProps: styleProps } = $
|
|
279
|
-
let { locale: locale } = $
|
|
280
|
-
let inputRef = $
|
|
281
|
-
let trackRef = $
|
|
282
|
-
let domRef = $
|
|
283
|
-
let state = $
|
|
278
|
+
let { styleProps: styleProps } = $kF0Zw$useStyleProps(props);
|
|
279
|
+
let { locale: locale } = $kF0Zw$useLocale();
|
|
280
|
+
let inputRef = $kF0Zw$useRef();
|
|
281
|
+
let trackRef = $kF0Zw$useRef();
|
|
282
|
+
let domRef = $kF0Zw$useFocusableRef(ref, inputRef);
|
|
283
|
+
let state = $kF0Zw$useColorSliderState({
|
|
284
284
|
...props,
|
|
285
285
|
locale: locale
|
|
286
286
|
});
|
|
@@ -296,16 +296,16 @@ function $3a860cf91ce0b231$var$ColorSlider(props, ref) {
|
|
|
296
296
|
if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) label = state.value.getChannelName(channel, locale);
|
|
297
297
|
// Show the value label by default if there is a visible label
|
|
298
298
|
if (showValueLabel == null) showValueLabel = !!label;
|
|
299
|
-
let { inputProps: inputProps , thumbProps: thumbProps , trackProps: trackProps , labelProps: labelProps , outputProps: outputProps } = $
|
|
299
|
+
let { inputProps: inputProps , thumbProps: thumbProps , trackProps: trackProps , labelProps: labelProps , outputProps: outputProps } = $kF0Zw$useColorSlider({
|
|
300
300
|
...props,
|
|
301
301
|
label: label,
|
|
302
302
|
'aria-label': ariaLabel,
|
|
303
303
|
trackRef: trackRef,
|
|
304
304
|
inputRef: inputRef
|
|
305
305
|
}, state);
|
|
306
|
-
let { isFocusVisible: isFocusVisible } = $
|
|
307
|
-
let [isFocused, setIsFocused] = $
|
|
308
|
-
let { focusProps: focusProps } = $
|
|
306
|
+
let { isFocusVisible: isFocusVisible } = $kF0Zw$useFocusVisible();
|
|
307
|
+
let [isFocused, setIsFocused] = $kF0Zw$useState(false);
|
|
308
|
+
let { focusProps: focusProps } = $kF0Zw$useFocus({
|
|
309
309
|
isDisabled: isDisabled,
|
|
310
310
|
onFocusChange: setIsFocused
|
|
311
311
|
});
|
|
@@ -314,82 +314,82 @@ function $3a860cf91ce0b231$var$ColorSlider(props, ref) {
|
|
|
314
314
|
else if (label != null && showValueLabel) alignLabel = 'space-between';
|
|
315
315
|
else if (label != null) alignLabel = 'flex-start';
|
|
316
316
|
else if (showValueLabel) alignLabel = 'flex-end';
|
|
317
|
-
return(/*#__PURE__*/ $
|
|
317
|
+
return(/*#__PURE__*/ $kF0Zw$react.createElement("div", {
|
|
318
318
|
ref: domRef,
|
|
319
319
|
...styleProps,
|
|
320
|
-
className: $
|
|
320
|
+
className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports)), {
|
|
321
321
|
'spectrum-ColorSlider-container--horizontal': !vertical,
|
|
322
322
|
'spectrum-ColorSlider-container--vertical': vertical
|
|
323
323
|
})
|
|
324
|
-
}, label && /*#__PURE__*/ $
|
|
324
|
+
}, label && /*#__PURE__*/ $kF0Zw$react.createElement($kF0Zw$Flex, {
|
|
325
325
|
direction: "row",
|
|
326
326
|
justifyContent: alignLabel
|
|
327
|
-
}, /*#__PURE__*/ $
|
|
327
|
+
}, /*#__PURE__*/ $kF0Zw$react.createElement($kF0Zw$Label, labelProps, label), showValueLabel && /*#__PURE__*/ $kF0Zw$react.createElement($kF0Zw$Label, {
|
|
328
328
|
elementType: "span"
|
|
329
|
-
}, /*#__PURE__*/ $
|
|
329
|
+
}, /*#__PURE__*/ $kF0Zw$react.createElement("output", outputProps, state.value.formatChannelValue(channel, locale)))), /*#__PURE__*/ $kF0Zw$react.createElement("div", {
|
|
330
330
|
...trackProps,
|
|
331
331
|
ref: trackRef,
|
|
332
|
-
className: $
|
|
332
|
+
className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports)), 'spectrum-ColorSlider', {
|
|
333
333
|
'is-disabled': isDisabled,
|
|
334
334
|
'spectrum-ColorSlider--vertical': vertical
|
|
335
335
|
})
|
|
336
|
-
}, /*#__PURE__*/ $
|
|
336
|
+
}, /*#__PURE__*/ $kF0Zw$react.createElement($3a90e89d07d7bbd5$export$a3cc47cee1c1ccc, {
|
|
337
337
|
value: state.getDisplayColor(),
|
|
338
338
|
isFocused: isFocused && isFocusVisible,
|
|
339
339
|
isDisabled: isDisabled,
|
|
340
340
|
isDragging: state.isThumbDragging(0),
|
|
341
|
-
className: $
|
|
341
|
+
className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports)), 'spectrum-ColorSlider-handle'),
|
|
342
342
|
...thumbProps
|
|
343
|
-
}, /*#__PURE__*/ $
|
|
343
|
+
}, /*#__PURE__*/ $kF0Zw$react.createElement("input", {
|
|
344
344
|
...inputProps,
|
|
345
345
|
...focusProps,
|
|
346
346
|
ref: inputRef,
|
|
347
|
-
className: $
|
|
347
|
+
className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports)), 'spectrum-ColorSlider-slider')
|
|
348
348
|
})))));
|
|
349
349
|
}
|
|
350
350
|
/**
|
|
351
351
|
* ColorSliders allow users to adjust an individual channel of a color value.
|
|
352
|
-
*/ let $
|
|
352
|
+
*/ let $3870e4ce67ed7ee1$export$44fd664bcca5b6fb = /*#__PURE__*/ $kF0Zw$react.forwardRef($3870e4ce67ed7ee1$var$ColorSlider);
|
|
353
353
|
|
|
354
354
|
|
|
355
|
-
var $
|
|
355
|
+
var $0077d47e004328f0$exports = {};
|
|
356
356
|
|
|
357
|
-
$parcel$export($
|
|
357
|
+
$parcel$export($0077d47e004328f0$exports, "ColorField", () => $0077d47e004328f0$export$b865d4358897bb17);
|
|
358
358
|
|
|
359
359
|
|
|
360
|
-
var $
|
|
360
|
+
var $9d47b39540b9e48a$exports = {};
|
|
361
361
|
|
|
362
|
-
$parcel$export($
|
|
363
|
-
var $
|
|
364
|
-
$
|
|
362
|
+
$parcel$export($9d47b39540b9e48a$exports, "react-spectrum-ColorField-input", () => $9d47b39540b9e48a$export$7d80c6630a750b1, (v) => $9d47b39540b9e48a$export$7d80c6630a750b1 = v);
|
|
363
|
+
var $9d47b39540b9e48a$export$7d80c6630a750b1;
|
|
364
|
+
$9d47b39540b9e48a$export$7d80c6630a750b1 = "react-spectrum-ColorField-input_7bde3a";
|
|
365
365
|
|
|
366
366
|
|
|
367
367
|
|
|
368
368
|
|
|
369
369
|
|
|
370
370
|
|
|
371
|
-
function $
|
|
372
|
-
props = $
|
|
371
|
+
function $0077d47e004328f0$var$ColorField(props, ref) {
|
|
372
|
+
props = $kF0Zw$useProviderProps(props);
|
|
373
373
|
let { value: // These disabled props are handled by the state hook
|
|
374
374
|
value , defaultValue: defaultValue , onChange: onChange , ...otherProps } = props;
|
|
375
|
-
let state = $
|
|
376
|
-
let inputRef = $
|
|
377
|
-
let { labelProps: labelProps , inputProps: inputProps } = $
|
|
378
|
-
return(/*#__PURE__*/ $
|
|
375
|
+
let state = $kF0Zw$useColorFieldState(props);
|
|
376
|
+
let inputRef = $kF0Zw$useRef();
|
|
377
|
+
let { labelProps: labelProps , inputProps: inputProps } = $kF0Zw$useColorField(otherProps, state, inputRef);
|
|
378
|
+
return(/*#__PURE__*/ $kF0Zw$react.createElement($kF0Zw$TextFieldBase, {
|
|
379
379
|
...otherProps,
|
|
380
380
|
ref: ref,
|
|
381
381
|
inputRef: inputRef,
|
|
382
382
|
labelProps: labelProps,
|
|
383
383
|
inputProps: inputProps,
|
|
384
|
-
inputClassName: $
|
|
384
|
+
inputClassName: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($9d47b39540b9e48a$exports)), 'react-spectrum-ColorField-input')
|
|
385
385
|
}));
|
|
386
386
|
}
|
|
387
387
|
/**
|
|
388
388
|
* ColorFields allow users to enter a color in #rrggbb hexadecimal format.
|
|
389
|
-
*/ const $
|
|
389
|
+
*/ const $0077d47e004328f0$export$b865d4358897bb17 = /*#__PURE__*/ $kF0Zw$react.forwardRef($0077d47e004328f0$var$ColorField);
|
|
390
390
|
|
|
391
391
|
|
|
392
392
|
|
|
393
393
|
|
|
394
|
-
export {$
|
|
394
|
+
export {$3aac1c27203f04b5$export$f80663f808113381 as ColorWheel, $3870e4ce67ed7ee1$export$44fd664bcca5b6fb as ColorSlider, $0077d47e004328f0$export$b865d4358897bb17 as ColorField};
|
|
395
395
|
//# sourceMappingURL=module.js.map
|