@react-spectrum/color 3.0.0-beta.3 → 3.0.0-beta.30

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 (16) hide show
  1. package/dist/import.mjs +572 -0
  2. package/dist/main.css +490 -1
  3. package/dist/main.css.map +1 -1
  4. package/dist/main.js +554 -396
  5. package/dist/main.js.map +1 -1
  6. package/dist/module.js +552 -338
  7. package/dist/module.js.map +1 -1
  8. package/dist/types.d.ts +10 -2
  9. package/dist/types.d.ts.map +1 -1
  10. package/package.json +23 -22
  11. package/src/ColorArea.tsx +89 -0
  12. package/src/ColorField.tsx +11 -9
  13. package/src/ColorSlider.tsx +21 -19
  14. package/src/ColorWheel.tsx +2 -2
  15. package/src/colorfield.css +5 -3
  16. package/src/index.ts +5 -4
package/dist/main.js CHANGED
@@ -1,418 +1,576 @@
1
- var {
2
- TextFieldBase
3
- } = require("@react-spectrum/textfield");
4
-
5
- var {
6
- useLocale
7
- } = require("@react-aria/i18n");
8
-
9
- var {
10
- useFocus,
11
- useFocusVisible
12
- } = require("@react-aria/interactions");
13
-
14
- var {
15
- Label
16
- } = require("@react-spectrum/label");
17
-
18
- var {
19
- Flex
20
- } = require("@react-spectrum/layout");
21
-
22
- var {
23
- useProviderProps
24
- } = require("@react-spectrum/provider");
25
-
26
- var {
27
- useFocusRing
28
- } = require("@react-aria/focus");
29
-
30
- var {
31
- useColorWheelState,
32
- useColorSliderState,
33
- useColorFieldState
34
- } = require("@react-stately/color");
35
-
36
- var {
37
- useColorWheel,
38
- useColorSlider,
39
- useColorField
40
- } = require("@react-aria/color");
41
-
42
- var {
43
- useId,
44
- useResizeObserver
45
- } = require("@react-aria/utils");
46
-
47
- var _react2 = require("react");
48
-
49
- var _react = $parcel$interopDefault(_react2);
50
-
51
- var {
52
- useCallback,
53
- useEffect,
54
- useRef,
55
- useState
56
- } = _react2;
57
-
58
- var _babelRuntimeHelpersObjectWithoutPropertiesLoose = $parcel$interopDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
59
-
60
- var {
61
- classNames,
62
- dimensionValue,
63
- useFocusableRef,
64
- useStyleProps
65
- } = require("@react-spectrum/utils");
66
-
67
- var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends"));
1
+ "use client";
68
2
 
69
3
  require("./main.css");
4
+ var $aAzec$reactspectrumutils = require("@react-spectrum/utils");
5
+ var $aAzec$reactariautils = require("@react-aria/utils");
6
+ var $aAzec$react = require("react");
7
+ var $aAzec$reactariacolor = require("@react-aria/color");
8
+ var $aAzec$reactstatelycolor = require("@react-stately/color");
9
+ var $aAzec$reactariafocus = require("@react-aria/focus");
10
+ var $aAzec$reactspectrumprovider = require("@react-spectrum/provider");
11
+ var $aAzec$reactspectrumlabel = require("@react-spectrum/label");
12
+ var $aAzec$reactariainteractions = require("@react-aria/interactions");
13
+ var $aAzec$reactariai18n = require("@react-aria/i18n");
14
+ var $aAzec$reactspectrumtextfield = require("@react-spectrum/textfield");
15
+ var $aAzec$reactspectrumform = require("@react-spectrum/form");
16
+
17
+
18
+ function $parcel$export(e, n, v, s) {
19
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
20
+ }
70
21
 
71
22
  function $parcel$interopDefault(a) {
72
23
  return a && a.__esModule ? a.default : a;
73
24
  }
74
25
 
75
- // ASSET: /Users/govett/dev/react-spectrum-v3/node_modules/@adobe/spectrum-css-temp/components/colorhandle/vars.css
76
- var $a55762e3754ccaed122df9bda494d$exports = {};
77
- $a55762e3754ccaed122df9bda494d$exports = {
78
- "spectrum-ColorHandle": "_spectrum-ColorHandle_cc6c6",
79
- "is-focused": "_is-focused_cc6c6",
80
- "focus-ring": "_focus-ring_cc6c6",
81
- "is-disabled": "_is-disabled_cc6c6",
82
- "spectrum-ColorHandle-color": "_spectrum-ColorHandle-color_cc6c6"
83
- };
84
- // ASSET: /Users/govett/dev/react-spectrum-v3/node_modules/@adobe/spectrum-css-temp/components/colorloupe/vars.css
85
- var $c0c7404f767cd2ff4437cc6ce4e$exports = {};
86
- $c0c7404f767cd2ff4437cc6ce4e$exports = {
87
- "spectrum-ColorLoupe": "_spectrum-ColorLoupe_583f5",
88
- "is-open": "_is-open_583f5",
89
- "spectrum-ColorLoupe-outer": "_spectrum-ColorLoupe-outer_583f5",
90
- "spectrum-ColorLoupe-inner-background": "_spectrum-ColorLoupe-inner-background_583f5",
91
- "spectrum-ColorLoupe-inner-checker": "_spectrum-ColorLoupe-inner-checker_583f5"
92
- };
93
- var $a55762e3754ccaed122df9bda494d$$interop$default = $parcel$interopDefault($a55762e3754ccaed122df9bda494d$exports);
94
- var $c0c7404f767cd2ff4437cc6ce4e$$interop$default = $parcel$interopDefault($c0c7404f767cd2ff4437cc6ce4e$exports);
95
-
96
- function $f1039d797e7720d032e7ae6b6b3355b$export$ColorThumb(props) {
97
- let {
98
- value,
99
- isDisabled,
100
- isDragging,
101
- isFocused,
102
- children,
103
- className = ''
104
- } = props,
105
- otherProps = _babelRuntimeHelpersObjectWithoutPropertiesLoose(props, ["value", "isDisabled", "isDragging", "isFocused", "children", "className"]);
106
-
107
- let patternId = useId();
108
- let valueCSS = value.toString('css');
109
- return /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersExtends({
110
- className: classNames($a55762e3754ccaed122df9bda494d$$interop$default, 'spectrum-ColorHandle', {
111
- 'is-focused': isFocused,
112
- 'is-disabled': isDisabled
113
- }) + ' ' + className
114
- }, otherProps), /*#__PURE__*/_react.createElement("div", {
115
- className: classNames($a55762e3754ccaed122df9bda494d$$interop$default, 'spectrum-ColorHandle-color'),
116
- style: {
117
- backgroundColor: valueCSS
118
- }
119
- }), /*#__PURE__*/_react.createElement("svg", {
120
- className: classNames($c0c7404f767cd2ff4437cc6ce4e$$interop$default, 'spectrum-ColorLoupe', {
121
- 'is-open': isDragging
122
- }),
123
- "aria-hidden": "true"
124
- }, /*#__PURE__*/_react.createElement("pattern", {
125
- id: patternId,
126
- x: "0",
127
- y: "0",
128
- width: "16",
129
- height: "16",
130
- patternUnits: "userSpaceOnUse"
131
- }, /*#__PURE__*/_react.createElement("rect", {
132
- className: classNames($c0c7404f767cd2ff4437cc6ce4e$$interop$default, 'spectrum-ColorLoupe-inner-background'),
133
- x: "0",
134
- y: "0",
135
- width: "16",
136
- height: "16"
137
- }), /*#__PURE__*/_react.createElement("rect", {
138
- className: classNames($c0c7404f767cd2ff4437cc6ce4e$$interop$default, 'spectrum-ColorLoupe-inner-checker'),
139
- x: "0",
140
- y: "0",
141
- width: "8",
142
- height: "8"
143
- }), /*#__PURE__*/_react.createElement("rect", {
144
- className: classNames($c0c7404f767cd2ff4437cc6ce4e$$interop$default, 'spectrum-ColorLoupe-inner-checker'),
145
- x: "8",
146
- y: "8",
147
- width: "8",
148
- height: "8"
149
- })), /*#__PURE__*/_react.createElement("path", {
150
- className: classNames($c0c7404f767cd2ff4437cc6ce4e$$interop$default, 'spectrum-ColorLoupe-inner'),
151
- d: "M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z",
152
- fill: "url(#" + patternId + ")"
153
- }), /*#__PURE__*/_react.createElement("path", {
154
- className: classNames($c0c7404f767cd2ff4437cc6ce4e$$interop$default, 'spectrum-ColorLoupe-inner'),
155
- d: "M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z",
156
- fill: valueCSS
157
- }), /*#__PURE__*/_react.createElement("path", {
158
- className: classNames($c0c7404f767cd2ff4437cc6ce4e$$interop$default, 'spectrum-ColorLoupe-outer'),
159
- 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"
160
- })), children);
26
+ $parcel$export(module.exports, "ColorArea", () => $5f016e950c2dc3a6$export$b2103f68a961418e);
27
+ $parcel$export(module.exports, "ColorWheel", () => $63a2864687444ae1$export$f80663f808113381);
28
+ $parcel$export(module.exports, "ColorSlider", () => $4537dec0de08c277$export$44fd664bcca5b6fb);
29
+ $parcel$export(module.exports, "ColorField", () => $8bdb9bc27ff3debb$export$b865d4358897bb17);
30
+ /*
31
+ * Copyright 2020 Adobe. All rights reserved.
32
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
33
+ * you may not use this file except in compliance with the License. You may obtain a copy
34
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
35
+ *
36
+ * Unless required by applicable law or agreed to in writing, software distributed under
37
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
38
+ * OF ANY KIND, either express or implied. See the License for the specific language
39
+ * governing permissions and limitations under the License.
40
+ */ /// <reference types="css-module-types" />
41
+ /*
42
+ * Copyright 2021 Adobe. All rights reserved.
43
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
44
+ * you may not use this file except in compliance with the License. You may obtain a copy
45
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
46
+ *
47
+ * Unless required by applicable law or agreed to in writing, software distributed under
48
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
49
+ * OF ANY KIND, either express or implied. See the License for the specific language
50
+ * governing permissions and limitations under the License.
51
+ */
52
+ /*
53
+ * Copyright 2020 Adobe. All rights reserved.
54
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
55
+ * you may not use this file except in compliance with the License. You may obtain a copy
56
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
57
+ *
58
+ * Unless required by applicable law or agreed to in writing, software distributed under
59
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
60
+ * OF ANY KIND, either express or implied. See the License for the specific language
61
+ * governing permissions and limitations under the License.
62
+ */
63
+
64
+ var $f61d632765728b2e$exports = {};
65
+
66
+ $parcel$export($f61d632765728b2e$exports, "spectrum-ColorControl-handle--focused", () => $f61d632765728b2e$export$1dd67f16e0d58f73, (v) => $f61d632765728b2e$export$1dd67f16e0d58f73 = v);
67
+ $parcel$export($f61d632765728b2e$exports, "focus-ring", () => $f61d632765728b2e$export$f39a09f249340e2a, (v) => $f61d632765728b2e$export$f39a09f249340e2a = v);
68
+ $parcel$export($f61d632765728b2e$exports, "is-disabled", () => $f61d632765728b2e$export$d35bc1e505d1ebbf, (v) => $f61d632765728b2e$export$d35bc1e505d1ebbf = v);
69
+ $parcel$export($f61d632765728b2e$exports, "is-focused", () => $f61d632765728b2e$export$e7dc768d35940237, (v) => $f61d632765728b2e$export$e7dc768d35940237 = v);
70
+ $parcel$export($f61d632765728b2e$exports, "spectrum-ColorHandle", () => $f61d632765728b2e$export$cd9afaa621b6216f, (v) => $f61d632765728b2e$export$cd9afaa621b6216f = v);
71
+ $parcel$export($f61d632765728b2e$exports, "spectrum-ColorHandle-color", () => $f61d632765728b2e$export$afe4c366ed4e659c, (v) => $f61d632765728b2e$export$afe4c366ed4e659c = v);
72
+ var $f61d632765728b2e$export$1dd67f16e0d58f73;
73
+ var $f61d632765728b2e$export$f39a09f249340e2a;
74
+ var $f61d632765728b2e$export$d35bc1e505d1ebbf;
75
+ var $f61d632765728b2e$export$e7dc768d35940237;
76
+ var $f61d632765728b2e$export$cd9afaa621b6216f;
77
+ var $f61d632765728b2e$export$afe4c366ed4e659c;
78
+ $f61d632765728b2e$export$1dd67f16e0d58f73 = `hoc2UW_spectrum-ColorControl-handle--focused`;
79
+ $f61d632765728b2e$export$f39a09f249340e2a = `hoc2UW_focus-ring ${$f61d632765728b2e$export$1dd67f16e0d58f73}`;
80
+ $f61d632765728b2e$export$d35bc1e505d1ebbf = `hoc2UW_is-disabled`;
81
+ $f61d632765728b2e$export$e7dc768d35940237 = `hoc2UW_is-focused ${$f61d632765728b2e$export$1dd67f16e0d58f73}`;
82
+ $f61d632765728b2e$export$cd9afaa621b6216f = `hoc2UW_spectrum-ColorHandle`;
83
+ $f61d632765728b2e$export$afe4c366ed4e659c = `hoc2UW_spectrum-ColorHandle-color`;
84
+
85
+
86
+ var $f65977ae56facfaa$exports = {};
87
+
88
+ $parcel$export($f65977ae56facfaa$exports, "is-open", () => $f65977ae56facfaa$export$a9781837241c946d, (v) => $f65977ae56facfaa$export$a9781837241c946d = v);
89
+ $parcel$export($f65977ae56facfaa$exports, "spectrum-ColorLoupe", () => $f65977ae56facfaa$export$88d6ed2576b21809, (v) => $f65977ae56facfaa$export$88d6ed2576b21809 = v);
90
+ $parcel$export($f65977ae56facfaa$exports, "spectrum-ColorLoupe-inner-background", () => $f65977ae56facfaa$export$397af82b48750fe5, (v) => $f65977ae56facfaa$export$397af82b48750fe5 = v);
91
+ $parcel$export($f65977ae56facfaa$exports, "spectrum-ColorLoupe-inner-checker", () => $f65977ae56facfaa$export$f9a2a02e0b271024, (v) => $f65977ae56facfaa$export$f9a2a02e0b271024 = v);
92
+ $parcel$export($f65977ae56facfaa$exports, "spectrum-ColorLoupe-outer", () => $f65977ae56facfaa$export$d6ad38291e8aca9c, (v) => $f65977ae56facfaa$export$d6ad38291e8aca9c = v);
93
+ var $f65977ae56facfaa$export$a9781837241c946d;
94
+ var $f65977ae56facfaa$export$88d6ed2576b21809;
95
+ var $f65977ae56facfaa$export$397af82b48750fe5;
96
+ var $f65977ae56facfaa$export$f9a2a02e0b271024;
97
+ var $f65977ae56facfaa$export$d6ad38291e8aca9c;
98
+ $f65977ae56facfaa$export$a9781837241c946d = `HpWpfq_is-open`;
99
+ $f65977ae56facfaa$export$88d6ed2576b21809 = `HpWpfq_spectrum-ColorLoupe`;
100
+ $f65977ae56facfaa$export$397af82b48750fe5 = `HpWpfq_spectrum-ColorLoupe-inner-background`;
101
+ $f65977ae56facfaa$export$f9a2a02e0b271024 = `HpWpfq_spectrum-ColorLoupe-inner-checker`;
102
+ $f65977ae56facfaa$export$d6ad38291e8aca9c = `HpWpfq_spectrum-ColorLoupe-outer`;
103
+
104
+
105
+
106
+ function $2b9adc23f6c7cae1$export$a3cc47cee1c1ccc(props) {
107
+ let { value: value, isDisabled: isDisabled, isDragging: isDragging, isFocused: isFocused, children: children, className: className = "", ...otherProps } = props;
108
+ let patternId = (0, $aAzec$reactariautils.useId)();
109
+ let valueCSS = value.toString("css");
110
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement("div", {
111
+ className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f61d632765728b2e$exports))), "spectrum-ColorHandle", {
112
+ "is-focused": isFocused,
113
+ "is-disabled": isDisabled
114
+ }) + " " + className,
115
+ ...otherProps
116
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement("div", {
117
+ className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f61d632765728b2e$exports))), "spectrum-ColorHandle-color"),
118
+ style: {
119
+ backgroundColor: valueCSS
120
+ }
121
+ }), /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement("svg", {
122
+ className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f65977ae56facfaa$exports))), "spectrum-ColorLoupe", {
123
+ "is-open": isDragging
124
+ }),
125
+ "aria-hidden": "true"
126
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement("pattern", {
127
+ id: patternId,
128
+ x: "0",
129
+ y: "0",
130
+ width: "16",
131
+ height: "16",
132
+ patternUnits: "userSpaceOnUse"
133
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement("rect", {
134
+ className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f65977ae56facfaa$exports))), "spectrum-ColorLoupe-inner-background"),
135
+ x: "0",
136
+ y: "0",
137
+ width: "16",
138
+ height: "16"
139
+ }), /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement("rect", {
140
+ className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f65977ae56facfaa$exports))), "spectrum-ColorLoupe-inner-checker"),
141
+ x: "0",
142
+ y: "0",
143
+ width: "8",
144
+ height: "8"
145
+ }), /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement("rect", {
146
+ className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f65977ae56facfaa$exports))), "spectrum-ColorLoupe-inner-checker"),
147
+ x: "8",
148
+ y: "8",
149
+ width: "8",
150
+ height: "8"
151
+ })), /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement("path", {
152
+ className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f65977ae56facfaa$exports))), "spectrum-ColorLoupe-inner"),
153
+ d: "M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z",
154
+ fill: `url(#${patternId})`
155
+ }), /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement("path", {
156
+ className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f65977ae56facfaa$exports))), "spectrum-ColorLoupe-inner"),
157
+ d: "M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z",
158
+ fill: valueCSS
159
+ }), /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement("path", {
160
+ className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f65977ae56facfaa$exports))), "spectrum-ColorLoupe-outer"),
161
+ 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"
162
+ })), children);
161
163
  }
162
164
 
163
- // ASSET: /Users/govett/dev/react-spectrum-v3/node_modules/@adobe/spectrum-css-temp/components/colorwheel/vars.css
164
- var $fa4e08bc458be14d6359c7136192ec4$exports = {};
165
- $fa4e08bc458be14d6359c7136192ec4$exports = {
166
- "spectrum-ColorWheel": "_spectrum-ColorWheel_5efa1",
167
- "is-focused": "_is-focused_5efa1",
168
- "spectrum-ColorWheel-handle": "_spectrum-ColorWheel-handle_5efa1",
169
- "spectrum-ColorWheel-slider": "_spectrum-ColorWheel-slider_5efa1",
170
- "is-disabled": "_is-disabled_5efa1",
171
- "is-dragged": "_is-dragged_5efa1",
172
- "spectrum-ColorWheel-gradient": "_spectrum-ColorWheel-gradient_5efa1",
173
- "spectrum-ColorWheel-segment": "_spectrum-ColorWheel-segment_5efa1"
174
- };
175
- const $c78a3286fdf083d3611a04f1cfbd186e$var$WHEEL_THICKNESS = 24;
176
- var $fa4e08bc458be14d6359c7136192ec4$$interop$default = $parcel$interopDefault($fa4e08bc458be14d6359c7136192ec4$exports);
177
-
178
- function $c78a3286fdf083d3611a04f1cfbd186e$var$ColorWheel(props, ref) {
179
- props = useProviderProps(props);
180
- let {
181
- isDisabled
182
- } = props;
183
- let size = props.size && dimensionValue(props.size);
184
- let {
185
- styleProps
186
- } = useStyleProps(props);
187
- let inputRef = useRef(null);
188
- let containerRef = useFocusableRef(ref, inputRef);
189
- let [wheelRadius, setWheelRadius] = useState(null);
190
- let [wheelThickness, setWheelThickness] = useState($c78a3286fdf083d3611a04f1cfbd186e$var$WHEEL_THICKNESS);
191
- let resizeHandler = useCallback(() => {
192
- if (containerRef.current) {
193
- setWheelRadius(containerRef.current.offsetWidth / 2);
194
- let thickness = window.getComputedStyle(containerRef.current).getPropertyValue('--spectrum-colorwheel-track-thickness');
195
-
196
- if (thickness) {
197
- setWheelThickness(parseInt(thickness, 10));
198
- }
199
- }
200
- }, [containerRef, setWheelRadius, setWheelThickness]);
201
- useEffect(() => {
202
- // the size observer's fallback to the window resize event doesn't fire on mount
203
- if (wheelRadius == null) {
204
- resizeHandler();
205
- }
206
- }, [wheelRadius, resizeHandler]);
207
- useResizeObserver({
208
- ref: containerRef,
209
- onResize: resizeHandler
210
- });
211
- let state = useColorWheelState(props);
212
- let {
213
- trackProps,
214
- inputProps,
215
- thumbProps
216
- } = useColorWheel(_babelRuntimeHelpersExtends({}, props, {
217
- innerRadius: wheelRadius - wheelThickness,
218
- outerRadius: wheelRadius
219
- }), state, inputRef);
220
- let {
221
- focusProps,
222
- isFocusVisible
223
- } = useFocusRing();
224
- return /*#__PURE__*/_react.createElement("div", {
225
- className: classNames($fa4e08bc458be14d6359c7136192ec4$$interop$default, 'spectrum-ColorWheel', {
226
- 'is-disabled': isDisabled
227
- }, styleProps.className),
228
- ref: containerRef,
229
- style: _babelRuntimeHelpersExtends({}, styleProps.style, {
230
- // Workaround around https://github.com/adobe/spectrum-css/issues/1032
231
- // @ts-ignore
232
- 'width': size,
233
- 'height': size
234
- })
235
- }, /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersExtends({}, trackProps, {
236
- className: classNames($fa4e08bc458be14d6359c7136192ec4$$interop$default, 'spectrum-ColorWheel-gradient')
237
- })), /*#__PURE__*/_react.createElement($f1039d797e7720d032e7ae6b6b3355b$export$ColorThumb, _babelRuntimeHelpersExtends({
238
- value: state.getDisplayColor(),
239
- isFocused: isFocusVisible,
240
- isDisabled: isDisabled,
241
- isDragging: state.isDragging,
242
- className: classNames($fa4e08bc458be14d6359c7136192ec4$$interop$default, 'spectrum-ColorWheel-handle')
243
- }, thumbProps), /*#__PURE__*/_react.createElement("input", _babelRuntimeHelpersExtends({}, focusProps, {
244
- className: classNames($fa4e08bc458be14d6359c7136192ec4$$interop$default, 'spectrum-ColorWheel-slider')
245
- }, inputProps, {
246
- ref: inputRef
247
- }))));
165
+
166
+
167
+
168
+ var $d4b4e0a63f9ca8c1$exports = {};
169
+
170
+ $parcel$export($d4b4e0a63f9ca8c1$exports, "focus-ring", () => $d4b4e0a63f9ca8c1$export$f39a09f249340e2a, (v) => $d4b4e0a63f9ca8c1$export$f39a09f249340e2a = v);
171
+ $parcel$export($d4b4e0a63f9ca8c1$exports, "is-disabled", () => $d4b4e0a63f9ca8c1$export$d35bc1e505d1ebbf, (v) => $d4b4e0a63f9ca8c1$export$d35bc1e505d1ebbf = v);
172
+ $parcel$export($d4b4e0a63f9ca8c1$exports, "is-focused", () => $d4b4e0a63f9ca8c1$export$e7dc768d35940237, (v) => $d4b4e0a63f9ca8c1$export$e7dc768d35940237 = v);
173
+ $parcel$export($d4b4e0a63f9ca8c1$exports, "spectrum-ColorArea", () => $d4b4e0a63f9ca8c1$export$bb6257a55a3c1efc, (v) => $d4b4e0a63f9ca8c1$export$bb6257a55a3c1efc = v);
174
+ $parcel$export($d4b4e0a63f9ca8c1$exports, "spectrum-ColorArea-gradient", () => $d4b4e0a63f9ca8c1$export$40686f4fcb8a9916, (v) => $d4b4e0a63f9ca8c1$export$40686f4fcb8a9916 = v);
175
+ $parcel$export($d4b4e0a63f9ca8c1$exports, "spectrum-ColorArea-handle", () => $d4b4e0a63f9ca8c1$export$d8addbd273c4e00, (v) => $d4b4e0a63f9ca8c1$export$d8addbd273c4e00 = v);
176
+ $parcel$export($d4b4e0a63f9ca8c1$exports, "spectrum-ColorArea-slider", () => $d4b4e0a63f9ca8c1$export$7d727cacaa7cea1e, (v) => $d4b4e0a63f9ca8c1$export$7d727cacaa7cea1e = v);
177
+ $parcel$export($d4b4e0a63f9ca8c1$exports, "spectrum-ColorHandle-color", () => $d4b4e0a63f9ca8c1$export$afe4c366ed4e659c, (v) => $d4b4e0a63f9ca8c1$export$afe4c366ed4e659c = v);
178
+ var $d4b4e0a63f9ca8c1$export$f39a09f249340e2a;
179
+ var $d4b4e0a63f9ca8c1$export$d35bc1e505d1ebbf;
180
+ var $d4b4e0a63f9ca8c1$export$e7dc768d35940237;
181
+ var $d4b4e0a63f9ca8c1$export$bb6257a55a3c1efc;
182
+ var $d4b4e0a63f9ca8c1$export$40686f4fcb8a9916;
183
+ var $d4b4e0a63f9ca8c1$export$d8addbd273c4e00;
184
+ var $d4b4e0a63f9ca8c1$export$7d727cacaa7cea1e;
185
+ var $d4b4e0a63f9ca8c1$export$afe4c366ed4e659c;
186
+ $d4b4e0a63f9ca8c1$export$f39a09f249340e2a = `lm1DSq_focus-ring`;
187
+ $d4b4e0a63f9ca8c1$export$d35bc1e505d1ebbf = `lm1DSq_is-disabled`;
188
+ $d4b4e0a63f9ca8c1$export$e7dc768d35940237 = `lm1DSq_is-focused`;
189
+ $d4b4e0a63f9ca8c1$export$bb6257a55a3c1efc = `lm1DSq_spectrum-ColorArea`;
190
+ $d4b4e0a63f9ca8c1$export$40686f4fcb8a9916 = `lm1DSq_spectrum-ColorArea-gradient`;
191
+ $d4b4e0a63f9ca8c1$export$d8addbd273c4e00 = `lm1DSq_spectrum-ColorArea-handle`;
192
+ $d4b4e0a63f9ca8c1$export$7d727cacaa7cea1e = `lm1DSq_spectrum-ColorArea-slider`;
193
+ $d4b4e0a63f9ca8c1$export$afe4c366ed4e659c = `lm1DSq_spectrum-ColorHandle-color`;
194
+
195
+
196
+
197
+
198
+
199
+
200
+ function $5f016e950c2dc3a6$var$ColorArea(props, ref) {
201
+ props = (0, $aAzec$reactspectrumprovider.useProviderProps)(props);
202
+ let { isDisabled: isDisabled } = props;
203
+ let size = props.size && (0, $aAzec$reactspectrumutils.dimensionValue)(props.size);
204
+ let { styleProps: styleProps } = (0, $aAzec$reactspectrumutils.useStyleProps)(props);
205
+ let inputXRef = (0, $aAzec$react.useRef)(null);
206
+ let inputYRef = (0, $aAzec$react.useRef)(null);
207
+ let containerRef = (0, $aAzec$reactspectrumutils.useFocusableRef)(ref, inputXRef);
208
+ let state = (0, $aAzec$reactstatelycolor.useColorAreaState)(props);
209
+ let { colorAreaProps: colorAreaProps, gradientProps: gradientProps, xInputProps: xInputProps, yInputProps: yInputProps, thumbProps: thumbProps } = (0, $aAzec$reactariacolor.useColorArea)({
210
+ ...props,
211
+ inputXRef: inputXRef,
212
+ inputYRef: inputYRef,
213
+ containerRef: containerRef
214
+ }, state);
215
+ let { focusProps: focusProps, isFocusVisible: isFocusVisible } = (0, $aAzec$reactariafocus.useFocusRing)();
216
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement("div", {
217
+ ...colorAreaProps,
218
+ className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($d4b4e0a63f9ca8c1$exports))), "spectrum-ColorArea", {
219
+ "is-disabled": isDisabled
220
+ }, styleProps.className),
221
+ ref: containerRef,
222
+ style: {
223
+ ...colorAreaProps.style,
224
+ ...styleProps.style,
225
+ // Workaround around https://github.com/adobe/spectrum-css/issues/1032
226
+ width: size,
227
+ height: size
228
+ }
229
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement("div", {
230
+ ...gradientProps,
231
+ className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($d4b4e0a63f9ca8c1$exports))), "spectrum-ColorArea-gradient")
232
+ }), /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement((0, $2b9adc23f6c7cae1$export$a3cc47cee1c1ccc), {
233
+ value: state.getDisplayColor(),
234
+ isFocused: isFocusVisible,
235
+ isDisabled: isDisabled,
236
+ isDragging: state.isDragging,
237
+ className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($d4b4e0a63f9ca8c1$exports))), "spectrum-ColorArea-handle"),
238
+ ...thumbProps
239
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement("div", {
240
+ role: "presentation"
241
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement("input", {
242
+ className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($d4b4e0a63f9ca8c1$exports))), "spectrum-ColorArea-slider"),
243
+ ...(0, $aAzec$reactariautils.mergeProps)(xInputProps, focusProps),
244
+ ref: inputXRef
245
+ }), /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement("input", {
246
+ className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($d4b4e0a63f9ca8c1$exports))), "spectrum-ColorArea-slider"),
247
+ ...(0, $aAzec$reactariautils.mergeProps)(yInputProps, focusProps),
248
+ ref: inputYRef
249
+ }))));
250
+ }
251
+ /**
252
+ * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
253
+ */ let $5f016e950c2dc3a6$export$b2103f68a961418e = /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).forwardRef($5f016e950c2dc3a6$var$ColorArea);
254
+
255
+
256
+ /*
257
+ * Copyright 2020 Adobe. All rights reserved.
258
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
259
+ * you may not use this file except in compliance with the License. You may obtain a copy
260
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
261
+ *
262
+ * Unless required by applicable law or agreed to in writing, software distributed under
263
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
264
+ * OF ANY KIND, either express or implied. See the License for the specific language
265
+ * governing permissions and limitations under the License.
266
+ */
267
+
268
+
269
+ var $8fc6b1a2f4e7f682$exports = {};
270
+
271
+ $parcel$export($8fc6b1a2f4e7f682$exports, "is-disabled", () => $8fc6b1a2f4e7f682$export$d35bc1e505d1ebbf, (v) => $8fc6b1a2f4e7f682$export$d35bc1e505d1ebbf = v);
272
+ $parcel$export($8fc6b1a2f4e7f682$exports, "is-dragged", () => $8fc6b1a2f4e7f682$export$8778c911bed6c759, (v) => $8fc6b1a2f4e7f682$export$8778c911bed6c759 = v);
273
+ $parcel$export($8fc6b1a2f4e7f682$exports, "is-focused", () => $8fc6b1a2f4e7f682$export$e7dc768d35940237, (v) => $8fc6b1a2f4e7f682$export$e7dc768d35940237 = v);
274
+ $parcel$export($8fc6b1a2f4e7f682$exports, "spectrum-ColorControl-hiddenField", () => $8fc6b1a2f4e7f682$export$41ee4f903fc703f9, (v) => $8fc6b1a2f4e7f682$export$41ee4f903fc703f9 = v);
275
+ $parcel$export($8fc6b1a2f4e7f682$exports, "spectrum-ColorWheel", () => $8fc6b1a2f4e7f682$export$b70a5ca28702fbc6, (v) => $8fc6b1a2f4e7f682$export$b70a5ca28702fbc6 = v);
276
+ $parcel$export($8fc6b1a2f4e7f682$exports, "spectrum-ColorWheel-gradient", () => $8fc6b1a2f4e7f682$export$9afaa791d7500a9b, (v) => $8fc6b1a2f4e7f682$export$9afaa791d7500a9b = v);
277
+ $parcel$export($8fc6b1a2f4e7f682$exports, "spectrum-ColorWheel-handle", () => $8fc6b1a2f4e7f682$export$4cd23920eb8ac056, (v) => $8fc6b1a2f4e7f682$export$4cd23920eb8ac056 = v);
278
+ $parcel$export($8fc6b1a2f4e7f682$exports, "spectrum-ColorWheel-segment", () => $8fc6b1a2f4e7f682$export$ada9fbffdaa4f10, (v) => $8fc6b1a2f4e7f682$export$ada9fbffdaa4f10 = v);
279
+ $parcel$export($8fc6b1a2f4e7f682$exports, "spectrum-ColorWheel-slider", () => $8fc6b1a2f4e7f682$export$f476ddda713d62b, (v) => $8fc6b1a2f4e7f682$export$f476ddda713d62b = v);
280
+ var $8fc6b1a2f4e7f682$export$d35bc1e505d1ebbf;
281
+ var $8fc6b1a2f4e7f682$export$8778c911bed6c759;
282
+ var $8fc6b1a2f4e7f682$export$e7dc768d35940237;
283
+ var $8fc6b1a2f4e7f682$export$41ee4f903fc703f9;
284
+ var $8fc6b1a2f4e7f682$export$b70a5ca28702fbc6;
285
+ var $8fc6b1a2f4e7f682$export$9afaa791d7500a9b;
286
+ var $8fc6b1a2f4e7f682$export$4cd23920eb8ac056;
287
+ var $8fc6b1a2f4e7f682$export$ada9fbffdaa4f10;
288
+ var $8fc6b1a2f4e7f682$export$f476ddda713d62b;
289
+ $8fc6b1a2f4e7f682$export$d35bc1e505d1ebbf = `qPIMxa_is-disabled`;
290
+ $8fc6b1a2f4e7f682$export$8778c911bed6c759 = `qPIMxa_is-dragged`;
291
+ $8fc6b1a2f4e7f682$export$e7dc768d35940237 = `qPIMxa_is-focused`;
292
+ $8fc6b1a2f4e7f682$export$41ee4f903fc703f9 = `qPIMxa_spectrum-ColorControl-hiddenField`;
293
+ $8fc6b1a2f4e7f682$export$b70a5ca28702fbc6 = `qPIMxa_spectrum-ColorWheel`;
294
+ $8fc6b1a2f4e7f682$export$9afaa791d7500a9b = `qPIMxa_spectrum-ColorWheel-gradient`;
295
+ $8fc6b1a2f4e7f682$export$4cd23920eb8ac056 = `qPIMxa_spectrum-ColorWheel-handle`;
296
+ $8fc6b1a2f4e7f682$export$ada9fbffdaa4f10 = `qPIMxa_spectrum-ColorWheel-segment`;
297
+ $8fc6b1a2f4e7f682$export$f476ddda713d62b = `qPIMxa_spectrum-ColorWheel-slider ${$8fc6b1a2f4e7f682$export$41ee4f903fc703f9}`;
298
+
299
+
300
+
301
+
302
+
303
+
304
+
305
+ const $63a2864687444ae1$var$WHEEL_THICKNESS = 24;
306
+ function $63a2864687444ae1$var$ColorWheel(props, ref) {
307
+ props = (0, $aAzec$reactspectrumprovider.useProviderProps)(props);
308
+ let { isDisabled: isDisabled } = props;
309
+ let size = props.size && (0, $aAzec$reactspectrumutils.dimensionValue)(props.size);
310
+ let { styleProps: styleProps } = (0, $aAzec$reactspectrumutils.useStyleProps)(props);
311
+ let inputRef = (0, $aAzec$react.useRef)(null);
312
+ let containerRef = (0, $aAzec$reactspectrumutils.useFocusableRef)(ref, inputRef);
313
+ let [wheelRadius, setWheelRadius] = (0, $aAzec$react.useState)(0);
314
+ let [wheelThickness, setWheelThickness] = (0, $aAzec$react.useState)($63a2864687444ae1$var$WHEEL_THICKNESS);
315
+ let resizeHandler = (0, $aAzec$react.useCallback)(()=>{
316
+ if (containerRef.current) {
317
+ setWheelRadius(containerRef.current.offsetWidth / 2);
318
+ let thickness = window.getComputedStyle(containerRef.current).getPropertyValue("--spectrum-colorwheel-track-thickness");
319
+ if (thickness) setWheelThickness(parseInt(thickness, 10));
320
+ }
321
+ }, [
322
+ containerRef,
323
+ setWheelRadius,
324
+ setWheelThickness
325
+ ]);
326
+ (0, $aAzec$react.useEffect)(()=>{
327
+ // the size observer's fallback to the window resize event doesn't fire on mount
328
+ if (wheelRadius === 0) resizeHandler();
329
+ }, [
330
+ wheelRadius,
331
+ resizeHandler
332
+ ]);
333
+ (0, $aAzec$reactariautils.useResizeObserver)({
334
+ ref: containerRef,
335
+ onResize: resizeHandler
336
+ });
337
+ let state = (0, $aAzec$reactstatelycolor.useColorWheelState)(props);
338
+ let { trackProps: trackProps, inputProps: inputProps, thumbProps: thumbProps } = (0, $aAzec$reactariacolor.useColorWheel)({
339
+ ...props,
340
+ innerRadius: wheelRadius - wheelThickness,
341
+ outerRadius: wheelRadius
342
+ }, state, inputRef);
343
+ let { focusProps: focusProps, isFocusVisible: isFocusVisible } = (0, $aAzec$reactariafocus.useFocusRing)();
344
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement("div", {
345
+ className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($8fc6b1a2f4e7f682$exports))), "spectrum-ColorWheel", {
346
+ "is-disabled": isDisabled
347
+ }, styleProps.className),
348
+ ref: containerRef,
349
+ style: {
350
+ ...styleProps.style,
351
+ // Workaround around https://github.com/adobe/spectrum-css/issues/1032
352
+ // @ts-ignore
353
+ "width": size,
354
+ "height": size
355
+ }
356
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement("div", {
357
+ ...trackProps,
358
+ className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($8fc6b1a2f4e7f682$exports))), "spectrum-ColorWheel-gradient")
359
+ }), /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement((0, $2b9adc23f6c7cae1$export$a3cc47cee1c1ccc), {
360
+ value: state.getDisplayColor(),
361
+ isFocused: isFocusVisible,
362
+ isDisabled: isDisabled,
363
+ isDragging: state.isDragging,
364
+ className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($8fc6b1a2f4e7f682$exports))), "spectrum-ColorWheel-handle"),
365
+ ...thumbProps
366
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement("input", {
367
+ ...focusProps,
368
+ className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($8fc6b1a2f4e7f682$exports))), "spectrum-ColorWheel-slider"),
369
+ ...inputProps,
370
+ ref: inputRef
371
+ })));
248
372
  }
249
373
  /**
250
374
  * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
251
- */
252
-
253
-
254
- let ColorWheel = /*#__PURE__*/_react.forwardRef($c78a3286fdf083d3611a04f1cfbd186e$var$ColorWheel);
255
-
256
- exports.ColorWheel = ColorWheel;
257
- // ASSET: /Users/govett/dev/react-spectrum-v3/node_modules/@adobe/spectrum-css-temp/components/colorslider/vars.css
258
- var $af343c9aea50f8d58d87012145d$exports = {};
259
- $af343c9aea50f8d58d87012145d$exports = {
260
- "spectrum-ColorSlider": "_spectrum-ColorSlider_5a55e",
261
- "is-focused": "_is-focused_5a55e",
262
- "spectrum-ColorSlider-handle": "_spectrum-ColorSlider-handle_5a55e",
263
- "spectrum-ColorSlider-slider": "_spectrum-ColorSlider-slider_5a55e",
264
- "spectrum-ColorSlider-container--horizontal": "_spectrum-ColorSlider-container--horizontal_5a55e",
265
- "spectrum-ColorSlider-container--vertical": "_spectrum-ColorSlider-container--vertical_5a55e",
266
- "is-disabled": "_is-disabled_5a55e",
267
- "spectrum-ColorSlider--vertical": "_spectrum-ColorSlider--vertical_5a55e"
268
- };
269
- var $af343c9aea50f8d58d87012145d$$interop$default = $parcel$interopDefault($af343c9aea50f8d58d87012145d$exports);
270
-
271
- function $fb4f131139da532ca621e724fdbef3c$var$ColorSlider(props, ref) {
272
- props = useProviderProps(props);
273
- let {
274
- isDisabled,
275
- channel,
276
- orientation,
277
- label,
278
- showValueLabel,
279
- 'aria-label': ariaLabel
280
- } = props;
281
- let vertical = orientation === 'vertical';
282
- let {
283
- styleProps
284
- } = useStyleProps(props);
285
- let {
286
- locale
287
- } = useLocale();
288
- let inputRef = useRef();
289
- let trackRef = useRef();
290
- let domRef = useFocusableRef(ref, inputRef);
291
- let state = useColorSliderState(_babelRuntimeHelpersExtends({}, props, {
292
- locale
293
- })); // If vertical and a label is provided, use it as an aria-label instead.
294
-
295
- if (vertical && label) {
296
- ariaLabel = ariaLabel || (typeof label === 'string' ? label : null);
297
- label = null;
298
- } // If no external label, aria-label or aria-labelledby is provided,
299
- // default to displaying the localized channel value.
300
- // Specifically check if label is undefined. If label is `null` then display no visible label.
301
- // A default aria-label is provided by useColorSlider in that case.
302
-
303
-
304
- if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) {
305
- label = state.value.getChannelName(channel, locale);
306
- } // Show the value label by default if there is a visible label
307
-
308
-
309
- if (showValueLabel == null) {
310
- showValueLabel = !!label;
311
- }
312
-
313
- let {
314
- inputProps,
315
- thumbProps,
316
- trackProps,
317
- labelProps,
318
- outputProps
319
- } = useColorSlider(_babelRuntimeHelpersExtends({}, props, {
320
- label,
321
- 'aria-label': ariaLabel,
322
- trackRef,
323
- inputRef
324
- }), state);
325
- let {
326
- isFocusVisible
327
- } = useFocusVisible();
328
- let [isFocused, setIsFocused] = useState(false);
329
- let {
330
- focusProps
331
- } = useFocus({
332
- isDisabled,
333
- onFocusChange: setIsFocused
334
- });
335
- let alignLabel;
336
-
337
- if (vertical) {
338
- alignLabel = 'center';
339
- } else if (label != null && showValueLabel) {
340
- alignLabel = 'space-between';
341
- } else if (label != null) {
342
- alignLabel = 'flex-start';
343
- } else if (showValueLabel) {
344
- alignLabel = 'flex-end';
345
- }
346
-
347
- return /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersExtends({
348
- ref: domRef
349
- }, styleProps, {
350
- className: classNames($af343c9aea50f8d58d87012145d$$interop$default, {
351
- 'spectrum-ColorSlider-container--horizontal': !vertical,
352
- 'spectrum-ColorSlider-container--vertical': vertical
353
- })
354
- }), label && /*#__PURE__*/_react.createElement(Flex, {
355
- direction: "row",
356
- justifyContent: alignLabel
357
- }, /*#__PURE__*/_react.createElement(Label, labelProps, label), showValueLabel && /*#__PURE__*/_react.createElement(Label, {
358
- elementType: "span"
359
- }, /*#__PURE__*/_react.createElement("output", outputProps, state.value.formatChannelValue(channel, locale)))), /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersExtends({}, trackProps, {
360
- ref: trackRef,
361
- className: classNames($af343c9aea50f8d58d87012145d$$interop$default, 'spectrum-ColorSlider', {
362
- 'is-disabled': isDisabled,
363
- 'spectrum-ColorSlider--vertical': vertical
364
- })
365
- }), /*#__PURE__*/_react.createElement($f1039d797e7720d032e7ae6b6b3355b$export$ColorThumb, _babelRuntimeHelpersExtends({
366
- value: state.getDisplayColor(),
367
- isFocused: isFocused && isFocusVisible,
368
- isDisabled: isDisabled,
369
- isDragging: state.isThumbDragging(0),
370
- className: classNames($af343c9aea50f8d58d87012145d$$interop$default, 'spectrum-ColorSlider-handle')
371
- }, thumbProps), /*#__PURE__*/_react.createElement("input", _babelRuntimeHelpersExtends({}, inputProps, focusProps, {
372
- ref: inputRef,
373
- className: classNames($af343c9aea50f8d58d87012145d$$interop$default, 'spectrum-ColorSlider-slider')
374
- })))));
375
+ */ let $63a2864687444ae1$export$f80663f808113381 = /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).forwardRef($63a2864687444ae1$var$ColorWheel);
376
+
377
+
378
+ /*
379
+ * Copyright 2020 Adobe. All rights reserved.
380
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
381
+ * you may not use this file except in compliance with the License. You may obtain a copy
382
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
383
+ *
384
+ * Unless required by applicable law or agreed to in writing, software distributed under
385
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
386
+ * OF ANY KIND, either express or implied. See the License for the specific language
387
+ * governing permissions and limitations under the License.
388
+ */
389
+
390
+
391
+
392
+ var $28060baf29cc5ac7$exports = {};
393
+
394
+ $parcel$export($28060baf29cc5ac7$exports, "contextualHelp", () => $28060baf29cc5ac7$export$4ba534aba1836d, (v) => $28060baf29cc5ac7$export$4ba534aba1836d = v);
395
+ $parcel$export($28060baf29cc5ac7$exports, "is-disabled", () => $28060baf29cc5ac7$export$d35bc1e505d1ebbf, (v) => $28060baf29cc5ac7$export$d35bc1e505d1ebbf = v);
396
+ $parcel$export($28060baf29cc5ac7$exports, "is-focused", () => $28060baf29cc5ac7$export$e7dc768d35940237, (v) => $28060baf29cc5ac7$export$e7dc768d35940237 = v);
397
+ $parcel$export($28060baf29cc5ac7$exports, "label", () => $28060baf29cc5ac7$export$1237798dc640739a, (v) => $28060baf29cc5ac7$export$1237798dc640739a = v);
398
+ $parcel$export($28060baf29cc5ac7$exports, "spectrum-ColorControl-hiddenField", () => $28060baf29cc5ac7$export$41ee4f903fc703f9, (v) => $28060baf29cc5ac7$export$41ee4f903fc703f9 = v);
399
+ $parcel$export($28060baf29cc5ac7$exports, "spectrum-ColorSlider", () => $28060baf29cc5ac7$export$a5f8b0989b27a604, (v) => $28060baf29cc5ac7$export$a5f8b0989b27a604 = v);
400
+ $parcel$export($28060baf29cc5ac7$exports, "spectrum-ColorSlider--vertical", () => $28060baf29cc5ac7$export$83dcf61b398bfaf1, (v) => $28060baf29cc5ac7$export$83dcf61b398bfaf1 = v);
401
+ $parcel$export($28060baf29cc5ac7$exports, "spectrum-ColorSlider-container--horizontal", () => $28060baf29cc5ac7$export$33e97914f6746614, (v) => $28060baf29cc5ac7$export$33e97914f6746614 = v);
402
+ $parcel$export($28060baf29cc5ac7$exports, "spectrum-ColorSlider-container--vertical", () => $28060baf29cc5ac7$export$cd1c093289104c66, (v) => $28060baf29cc5ac7$export$cd1c093289104c66 = v);
403
+ $parcel$export($28060baf29cc5ac7$exports, "spectrum-ColorSlider-contextualHelp", () => $28060baf29cc5ac7$export$26ffe4cf5a5aa53c, (v) => $28060baf29cc5ac7$export$26ffe4cf5a5aa53c = v);
404
+ $parcel$export($28060baf29cc5ac7$exports, "spectrum-ColorSlider-handle", () => $28060baf29cc5ac7$export$8c273ba92fabe1f1, (v) => $28060baf29cc5ac7$export$8c273ba92fabe1f1 = v);
405
+ $parcel$export($28060baf29cc5ac7$exports, "spectrum-ColorSlider-labelContainer", () => $28060baf29cc5ac7$export$65139e62047f0361, (v) => $28060baf29cc5ac7$export$65139e62047f0361 = v);
406
+ $parcel$export($28060baf29cc5ac7$exports, "spectrum-ColorSlider-slider", () => $28060baf29cc5ac7$export$2f08b72944af536, (v) => $28060baf29cc5ac7$export$2f08b72944af536 = v);
407
+ $parcel$export($28060baf29cc5ac7$exports, "spectrum-ColorSlider-valueLabel", () => $28060baf29cc5ac7$export$c2fbec5a538c1f81, (v) => $28060baf29cc5ac7$export$c2fbec5a538c1f81 = v);
408
+ $parcel$export($28060baf29cc5ac7$exports, "value", () => $28060baf29cc5ac7$export$2ab9a8f9f1186f14, (v) => $28060baf29cc5ac7$export$2ab9a8f9f1186f14 = v);
409
+ var $28060baf29cc5ac7$export$4ba534aba1836d;
410
+ var $28060baf29cc5ac7$export$d35bc1e505d1ebbf;
411
+ var $28060baf29cc5ac7$export$e7dc768d35940237;
412
+ var $28060baf29cc5ac7$export$1237798dc640739a;
413
+ var $28060baf29cc5ac7$export$41ee4f903fc703f9;
414
+ var $28060baf29cc5ac7$export$a5f8b0989b27a604;
415
+ var $28060baf29cc5ac7$export$83dcf61b398bfaf1;
416
+ var $28060baf29cc5ac7$export$33e97914f6746614;
417
+ var $28060baf29cc5ac7$export$cd1c093289104c66;
418
+ var $28060baf29cc5ac7$export$26ffe4cf5a5aa53c;
419
+ var $28060baf29cc5ac7$export$8c273ba92fabe1f1;
420
+ var $28060baf29cc5ac7$export$65139e62047f0361;
421
+ var $28060baf29cc5ac7$export$2f08b72944af536;
422
+ var $28060baf29cc5ac7$export$c2fbec5a538c1f81;
423
+ var $28060baf29cc5ac7$export$2ab9a8f9f1186f14;
424
+ $28060baf29cc5ac7$export$4ba534aba1836d = `WJOmgG_contextualHelp`;
425
+ $28060baf29cc5ac7$export$d35bc1e505d1ebbf = `WJOmgG_is-disabled`;
426
+ $28060baf29cc5ac7$export$e7dc768d35940237 = `WJOmgG_is-focused`;
427
+ $28060baf29cc5ac7$export$1237798dc640739a = `WJOmgG_label`;
428
+ $28060baf29cc5ac7$export$41ee4f903fc703f9 = `WJOmgG_spectrum-ColorControl-hiddenField`;
429
+ $28060baf29cc5ac7$export$a5f8b0989b27a604 = `WJOmgG_spectrum-ColorSlider`;
430
+ $28060baf29cc5ac7$export$83dcf61b398bfaf1 = `WJOmgG_spectrum-ColorSlider--vertical`;
431
+ $28060baf29cc5ac7$export$33e97914f6746614 = `WJOmgG_spectrum-ColorSlider-container--horizontal`;
432
+ $28060baf29cc5ac7$export$cd1c093289104c66 = `WJOmgG_spectrum-ColorSlider-container--vertical`;
433
+ $28060baf29cc5ac7$export$26ffe4cf5a5aa53c = `WJOmgG_spectrum-ColorSlider-contextualHelp`;
434
+ $28060baf29cc5ac7$export$8c273ba92fabe1f1 = `WJOmgG_spectrum-ColorSlider-handle`;
435
+ $28060baf29cc5ac7$export$65139e62047f0361 = `WJOmgG_spectrum-ColorSlider-labelContainer`;
436
+ $28060baf29cc5ac7$export$2f08b72944af536 = `WJOmgG_spectrum-ColorSlider-slider ${$28060baf29cc5ac7$export$41ee4f903fc703f9}`;
437
+ $28060baf29cc5ac7$export$c2fbec5a538c1f81 = `WJOmgG_spectrum-ColorSlider-valueLabel`;
438
+ $28060baf29cc5ac7$export$2ab9a8f9f1186f14 = `WJOmgG_value`;
439
+
440
+
441
+
442
+
443
+
444
+
445
+
446
+ function $4537dec0de08c277$var$ColorSlider(props, ref) {
447
+ props = (0, $aAzec$reactspectrumprovider.useProviderProps)(props);
448
+ let { isDisabled: isDisabled, channel: channel, orientation: orientation, label: label, showValueLabel: showValueLabel, "aria-label": ariaLabel } = props;
449
+ let vertical = orientation === "vertical";
450
+ let { styleProps: styleProps } = (0, $aAzec$reactspectrumutils.useStyleProps)(props);
451
+ let { locale: locale } = (0, $aAzec$reactariai18n.useLocale)();
452
+ let inputRef = (0, $aAzec$react.useRef)(null);
453
+ let trackRef = (0, $aAzec$react.useRef)(null);
454
+ let domRef = (0, $aAzec$reactspectrumutils.useFocusableRef)(ref, inputRef);
455
+ let state = (0, $aAzec$reactstatelycolor.useColorSliderState)({
456
+ ...props,
457
+ locale: locale
458
+ });
459
+ // If vertical and a label is provided, use it as an aria-label instead.
460
+ if (vertical && label) {
461
+ ariaLabel = ariaLabel || (typeof label === "string" ? label : undefined);
462
+ label = null;
463
+ }
464
+ // If no external label, aria-label or aria-labelledby is provided,
465
+ // default to displaying the localized channel value.
466
+ // Specifically check if label is undefined. If label is `null` then display no visible label.
467
+ // A default aria-label is provided by useColorSlider in that case.
468
+ if (label === undefined && !ariaLabel && !props["aria-labelledby"] && !vertical) label = state.value.getChannelName(channel, locale);
469
+ // Show the value label by default if there is a visible label
470
+ if (showValueLabel == null) showValueLabel = !!label;
471
+ let { inputProps: inputProps, thumbProps: thumbProps, trackProps: trackProps, labelProps: labelProps, outputProps: outputProps } = (0, $aAzec$reactariacolor.useColorSlider)({
472
+ ...props,
473
+ label: label,
474
+ "aria-label": ariaLabel,
475
+ trackRef: trackRef,
476
+ inputRef: inputRef
477
+ }, state);
478
+ let { isFocusVisible: isFocusVisible } = (0, $aAzec$reactariainteractions.useFocusVisible)();
479
+ let [isFocused, setIsFocused] = (0, $aAzec$react.useState)(false);
480
+ let { focusProps: focusProps } = (0, $aAzec$reactariainteractions.useFocus)({
481
+ isDisabled: isDisabled,
482
+ onFocusChange: setIsFocused
483
+ });
484
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement("div", {
485
+ ref: domRef,
486
+ ...styleProps,
487
+ className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($28060baf29cc5ac7$exports))), {
488
+ "spectrum-ColorSlider-container--horizontal": !vertical,
489
+ "spectrum-ColorSlider-container--vertical": vertical
490
+ })
491
+ }, label && /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement("div", {
492
+ className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($28060baf29cc5ac7$exports))), "spectrum-ColorSlider-labelContainer")
493
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement((0, $aAzec$reactspectrumlabel.Label), labelProps, label), props.contextualHelp && /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement((0, $aAzec$reactspectrumutils.SlotProvider), {
494
+ slots: {
495
+ actionButton: {
496
+ UNSAFE_className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($28060baf29cc5ac7$exports))), "spectrum-ColorSlider-contextualHelp")
497
+ }
498
+ }
499
+ }, props.contextualHelp), showValueLabel && /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement((0, $aAzec$reactspectrumlabel.Label), {
500
+ elementType: "span",
501
+ UNSAFE_className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($28060baf29cc5ac7$exports))), "spectrum-ColorSlider-valueLabel")
502
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement("output", outputProps, state.value.formatChannelValue(channel, locale)))), /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement("div", {
503
+ ...trackProps,
504
+ ref: trackRef,
505
+ className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($28060baf29cc5ac7$exports))), "spectrum-ColorSlider", {
506
+ "is-disabled": isDisabled,
507
+ "spectrum-ColorSlider--vertical": vertical
508
+ })
509
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement((0, $2b9adc23f6c7cae1$export$a3cc47cee1c1ccc), {
510
+ value: state.getDisplayColor(),
511
+ isFocused: isFocused && isFocusVisible,
512
+ isDisabled: isDisabled,
513
+ isDragging: state.isThumbDragging(0),
514
+ className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($28060baf29cc5ac7$exports))), "spectrum-ColorSlider-handle"),
515
+ ...thumbProps
516
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement("input", {
517
+ ...inputProps,
518
+ ...focusProps,
519
+ ref: inputRef,
520
+ className: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($28060baf29cc5ac7$exports))), "spectrum-ColorSlider-slider")
521
+ }))));
375
522
  }
376
523
  /**
377
524
  * ColorSliders allow users to adjust an individual channel of a color value.
378
- */
379
-
380
-
381
- let ColorSlider = /*#__PURE__*/_react.forwardRef($fb4f131139da532ca621e724fdbef3c$var$ColorSlider);
382
-
383
- exports.ColorSlider = ColorSlider;
384
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/color/src/colorfield.css
385
- var $b08711e3115a699593427293c2e01ba$exports = {};
386
- $b08711e3115a699593427293c2e01ba$exports = {
387
- "react-spectrum-ColorField-input": "_react-spectrum-ColorField-input_4e4c4"
388
- };
389
- var $b08711e3115a699593427293c2e01ba$$interop$default = $parcel$interopDefault($b08711e3115a699593427293c2e01ba$exports);
390
-
391
- function $b25d8991f57211cb8e429d74bf3d19f7$var$ColorField(props, ref) {
392
- props = useProviderProps(props);
393
-
394
- let otherProps = _babelRuntimeHelpersObjectWithoutPropertiesLoose(props, ["value", "defaultValue", "onChange"]);
395
-
396
- let state = useColorFieldState(props);
397
- let inputRef = useRef();
398
- let {
399
- labelProps,
400
- inputProps
401
- } = useColorField(otherProps, state, inputRef);
402
- return /*#__PURE__*/_react.createElement(TextFieldBase, _babelRuntimeHelpersExtends({}, otherProps, {
403
- ref: ref,
404
- inputRef: inputRef,
405
- labelProps: labelProps,
406
- inputProps: inputProps,
407
- inputClassName: classNames($b08711e3115a699593427293c2e01ba$$interop$default, 'react-spectrum-ColorField-input')
408
- }));
525
+ */ let $4537dec0de08c277$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).forwardRef($4537dec0de08c277$var$ColorSlider);
526
+
527
+
528
+ /*
529
+ * Copyright 2020 Adobe. All rights reserved.
530
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
531
+ * you may not use this file except in compliance with the License. You may obtain a copy
532
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
533
+ *
534
+ * Unless required by applicable law or agreed to in writing, software distributed under
535
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
536
+ * OF ANY KIND, either express or implied. See the License for the specific language
537
+ * governing permissions and limitations under the License.
538
+ */
539
+
540
+ var $ddec4d6aa21146c4$exports = {};
541
+
542
+ $parcel$export($ddec4d6aa21146c4$exports, "react-spectrum-ColorField-input", () => $ddec4d6aa21146c4$export$7d80c6630a750b1, (v) => $ddec4d6aa21146c4$export$7d80c6630a750b1 = v);
543
+ var $ddec4d6aa21146c4$export$7d80c6630a750b1;
544
+ $ddec4d6aa21146c4$export$7d80c6630a750b1 = `UccskW_react-spectrum-ColorField-input`;
545
+
546
+
547
+
548
+
549
+
550
+
551
+
552
+ function $8bdb9bc27ff3debb$var$ColorField(props, ref) {
553
+ props = (0, $aAzec$reactspectrumprovider.useProviderProps)(props);
554
+ props = (0, $aAzec$reactspectrumform.useFormProps)(props);
555
+ let { value: // These disabled props are handled by the state hook
556
+ value, defaultValue: defaultValue, onChange: onChange, ...otherProps } = props;
557
+ let state = (0, $aAzec$reactstatelycolor.useColorFieldState)(props);
558
+ let inputRef = (0, $aAzec$react.useRef)(null);
559
+ let result = (0, $aAzec$reactariacolor.useColorField)(otherProps, state, inputRef);
560
+ if (props.placeholder) console.warn("Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text");
561
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).createElement((0, $aAzec$reactspectrumtextfield.TextFieldBase), {
562
+ ...otherProps,
563
+ ref: ref,
564
+ inputRef: inputRef,
565
+ ...result,
566
+ inputClassName: (0, $aAzec$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($ddec4d6aa21146c4$exports))), "react-spectrum-ColorField-input")
567
+ });
409
568
  }
410
569
  /**
411
570
  * ColorFields allow users to enter a color in #rrggbb hexadecimal format.
412
- */
571
+ */ const $8bdb9bc27ff3debb$export$b865d4358897bb17 = /*#__PURE__*/ (0, ($parcel$interopDefault($aAzec$react))).forwardRef($8bdb9bc27ff3debb$var$ColorField);
572
+
413
573
 
414
574
 
415
- const ColorField = /*#__PURE__*/_react.forwardRef($b25d8991f57211cb8e429d74bf3d19f7$var$ColorField);
416
575
 
417
- exports.ColorField = ColorField;
418
576
  //# sourceMappingURL=main.js.map