@react-spectrum/color 3.0.0-beta.0 → 3.0.0-beta.11

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 (14) hide show
  1. package/dist/main.css +1 -2
  2. package/dist/main.js +485 -384
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +467 -325
  5. package/dist/module.js.map +1 -1
  6. package/dist/types.d.ts +9 -2
  7. package/dist/types.d.ts.map +1 -1
  8. package/package.json +22 -21
  9. package/src/ColorArea.tsx +86 -0
  10. package/src/ColorField.tsx +11 -1
  11. package/src/ColorSlider.tsx +1 -1
  12. package/src/colorfield.css +16 -0
  13. package/src/index.ts +1 -0
  14. package/dist/main.css.map +0 -1
package/dist/main.js CHANGED
@@ -1,407 +1,508 @@
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"));
68
-
69
1
  require("./main.css");
2
+ var $aAzec$reactspectrumutils = require("@react-spectrum/utils");
3
+ var $aAzec$reactariautils = require("@react-aria/utils");
4
+ var $aAzec$react = require("react");
5
+ var $aAzec$reactariacolor = require("@react-aria/color");
6
+ var $aAzec$reactstatelycolor = require("@react-stately/color");
7
+ var $aAzec$reactariafocus = require("@react-aria/focus");
8
+ var $aAzec$reactspectrumprovider = require("@react-spectrum/provider");
9
+ var $aAzec$reactspectrumlayout = require("@react-spectrum/layout");
10
+ var $aAzec$reactspectrumlabel = require("@react-spectrum/label");
11
+ var $aAzec$reactariainteractions = require("@react-aria/interactions");
12
+ var $aAzec$reactariai18n = require("@react-aria/i18n");
13
+ var $aAzec$reactspectrumtextfield = require("@react-spectrum/textfield");
14
+
15
+ function $parcel$exportWildcard(dest, source) {
16
+ Object.keys(source).forEach(function(key) {
17
+ if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
18
+ return;
19
+ }
20
+
21
+ Object.defineProperty(dest, key, {
22
+ enumerable: true,
23
+ get: function get() {
24
+ return source[key];
25
+ }
26
+ });
27
+ });
70
28
 
29
+ return dest;
30
+ }
71
31
  function $parcel$interopDefault(a) {
72
32
  return a && a.__esModule ? a.default : a;
73
33
  }
74
-
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);
34
+ function $parcel$export(e, n, v, s) {
35
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
36
+ }
37
+ var $5f016e950c2dc3a6$exports = {};
38
+
39
+ $parcel$export($5f016e950c2dc3a6$exports, "ColorArea", () => $5f016e950c2dc3a6$export$b2103f68a961418e);
40
+
41
+
42
+
43
+ var $f61d632765728b2e$exports = {};
44
+
45
+ $parcel$export($f61d632765728b2e$exports, "spectrum-ColorHandle", () => $f61d632765728b2e$export$cd9afaa621b6216f, (v) => $f61d632765728b2e$export$cd9afaa621b6216f = v);
46
+ $parcel$export($f61d632765728b2e$exports, "is-focused", () => $f61d632765728b2e$export$e7dc768d35940237, (v) => $f61d632765728b2e$export$e7dc768d35940237 = v);
47
+ $parcel$export($f61d632765728b2e$exports, "focus-ring", () => $f61d632765728b2e$export$f39a09f249340e2a, (v) => $f61d632765728b2e$export$f39a09f249340e2a = v);
48
+ $parcel$export($f61d632765728b2e$exports, "is-disabled", () => $f61d632765728b2e$export$d35bc1e505d1ebbf, (v) => $f61d632765728b2e$export$d35bc1e505d1ebbf = v);
49
+ $parcel$export($f61d632765728b2e$exports, "spectrum-ColorHandle-color", () => $f61d632765728b2e$export$afe4c366ed4e659c, (v) => $f61d632765728b2e$export$afe4c366ed4e659c = v);
50
+ var $f61d632765728b2e$export$cd9afaa621b6216f;
51
+ var $f61d632765728b2e$export$e7dc768d35940237;
52
+ var $f61d632765728b2e$export$f39a09f249340e2a;
53
+ var $f61d632765728b2e$export$d35bc1e505d1ebbf;
54
+ var $f61d632765728b2e$export$afe4c366ed4e659c;
55
+ $f61d632765728b2e$export$cd9afaa621b6216f = "spectrum-ColorHandle_5a9f41";
56
+ $f61d632765728b2e$export$e7dc768d35940237 = "is-focused_5a9f41";
57
+ $f61d632765728b2e$export$f39a09f249340e2a = "focus-ring_5a9f41";
58
+ $f61d632765728b2e$export$d35bc1e505d1ebbf = "is-disabled_5a9f41";
59
+ $f61d632765728b2e$export$afe4c366ed4e659c = "spectrum-ColorHandle-color_5a9f41";
60
+
61
+
62
+ var $f65977ae56facfaa$exports = {};
63
+
64
+ $parcel$export($f65977ae56facfaa$exports, "spectrum-ColorLoupe", () => $f65977ae56facfaa$export$88d6ed2576b21809, (v) => $f65977ae56facfaa$export$88d6ed2576b21809 = v);
65
+ $parcel$export($f65977ae56facfaa$exports, "is-open", () => $f65977ae56facfaa$export$a9781837241c946d, (v) => $f65977ae56facfaa$export$a9781837241c946d = v);
66
+ $parcel$export($f65977ae56facfaa$exports, "spectrum-ColorLoupe-outer", () => $f65977ae56facfaa$export$d6ad38291e8aca9c, (v) => $f65977ae56facfaa$export$d6ad38291e8aca9c = v);
67
+ $parcel$export($f65977ae56facfaa$exports, "spectrum-ColorLoupe-inner-background", () => $f65977ae56facfaa$export$397af82b48750fe5, (v) => $f65977ae56facfaa$export$397af82b48750fe5 = v);
68
+ $parcel$export($f65977ae56facfaa$exports, "spectrum-ColorLoupe-inner-checker", () => $f65977ae56facfaa$export$f9a2a02e0b271024, (v) => $f65977ae56facfaa$export$f9a2a02e0b271024 = v);
69
+ var $f65977ae56facfaa$export$88d6ed2576b21809;
70
+ var $f65977ae56facfaa$export$a9781837241c946d;
71
+ var $f65977ae56facfaa$export$d6ad38291e8aca9c;
72
+ var $f65977ae56facfaa$export$397af82b48750fe5;
73
+ var $f65977ae56facfaa$export$f9a2a02e0b271024;
74
+ $f65977ae56facfaa$export$88d6ed2576b21809 = "spectrum-ColorLoupe_c818a8";
75
+ $f65977ae56facfaa$export$a9781837241c946d = "is-open_c818a8";
76
+ $f65977ae56facfaa$export$d6ad38291e8aca9c = "spectrum-ColorLoupe-outer_c818a8";
77
+ $f65977ae56facfaa$export$397af82b48750fe5 = "spectrum-ColorLoupe-inner-background_c818a8";
78
+ $f65977ae56facfaa$export$f9a2a02e0b271024 = "spectrum-ColorLoupe-inner-checker_c818a8";
79
+
80
+
81
+
82
+ function $2b9adc23f6c7cae1$export$a3cc47cee1c1ccc(props) {
83
+ let { value: value , isDisabled: isDisabled , isDragging: isDragging , isFocused: isFocused , children: children , className: className = '' , ...otherProps } = props;
84
+ let patternId = $aAzec$reactariautils.useId();
85
+ let valueCSS = value.toString('css');
86
+ return(/*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("div", {
87
+ className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($f61d632765728b2e$exports)), 'spectrum-ColorHandle', {
88
+ 'is-focused': isFocused,
89
+ 'is-disabled': isDisabled
90
+ }) + ' ' + className,
91
+ ...otherProps
92
+ }, /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("div", {
93
+ className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($f61d632765728b2e$exports)), 'spectrum-ColorHandle-color'),
94
+ style: {
95
+ backgroundColor: valueCSS
96
+ }
97
+ }), /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("svg", {
98
+ className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($f65977ae56facfaa$exports)), 'spectrum-ColorLoupe', {
99
+ 'is-open': isDragging
100
+ }),
101
+ "aria-hidden": "true"
102
+ }, /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("pattern", {
103
+ id: patternId,
104
+ x: "0",
105
+ y: "0",
106
+ width: "16",
107
+ height: "16",
108
+ patternUnits: "userSpaceOnUse"
109
+ }, /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("rect", {
110
+ className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($f65977ae56facfaa$exports)), 'spectrum-ColorLoupe-inner-background'),
111
+ x: "0",
112
+ y: "0",
113
+ width: "16",
114
+ height: "16"
115
+ }), /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("rect", {
116
+ className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($f65977ae56facfaa$exports)), 'spectrum-ColorLoupe-inner-checker'),
117
+ x: "0",
118
+ y: "0",
119
+ width: "8",
120
+ height: "8"
121
+ }), /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("rect", {
122
+ className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($f65977ae56facfaa$exports)), 'spectrum-ColorLoupe-inner-checker'),
123
+ x: "8",
124
+ y: "8",
125
+ width: "8",
126
+ height: "8"
127
+ })), /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("path", {
128
+ className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($f65977ae56facfaa$exports)), 'spectrum-ColorLoupe-inner'),
129
+ d: "M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z",
130
+ fill: `url(#${patternId})`
131
+ }), /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("path", {
132
+ className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($f65977ae56facfaa$exports)), 'spectrum-ColorLoupe-inner'),
133
+ d: "M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z",
134
+ fill: valueCSS
135
+ }), /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("path", {
136
+ className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($f65977ae56facfaa$exports)), 'spectrum-ColorLoupe-outer'),
137
+ 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"
138
+ })), children));
161
139
  }
162
140
 
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
- }))));
141
+
142
+
143
+
144
+ var $d4b4e0a63f9ca8c1$exports = {};
145
+
146
+ $parcel$export($d4b4e0a63f9ca8c1$exports, "spectrum-ColorArea", () => $d4b4e0a63f9ca8c1$export$bb6257a55a3c1efc, (v) => $d4b4e0a63f9ca8c1$export$bb6257a55a3c1efc = v);
147
+ $parcel$export($d4b4e0a63f9ca8c1$exports, "is-focused", () => $d4b4e0a63f9ca8c1$export$e7dc768d35940237, (v) => $d4b4e0a63f9ca8c1$export$e7dc768d35940237 = v);
148
+ $parcel$export($d4b4e0a63f9ca8c1$exports, "focus-ring", () => $d4b4e0a63f9ca8c1$export$f39a09f249340e2a, (v) => $d4b4e0a63f9ca8c1$export$f39a09f249340e2a = v);
149
+ $parcel$export($d4b4e0a63f9ca8c1$exports, "spectrum-ColorArea-handle", () => $d4b4e0a63f9ca8c1$export$d8addbd273c4e00, (v) => $d4b4e0a63f9ca8c1$export$d8addbd273c4e00 = v);
150
+ $parcel$export($d4b4e0a63f9ca8c1$exports, "is-disabled", () => $d4b4e0a63f9ca8c1$export$d35bc1e505d1ebbf, (v) => $d4b4e0a63f9ca8c1$export$d35bc1e505d1ebbf = v);
151
+ $parcel$export($d4b4e0a63f9ca8c1$exports, "spectrum-ColorArea-gradient", () => $d4b4e0a63f9ca8c1$export$40686f4fcb8a9916, (v) => $d4b4e0a63f9ca8c1$export$40686f4fcb8a9916 = v);
152
+ $parcel$export($d4b4e0a63f9ca8c1$exports, "spectrum-ColorArea-slider", () => $d4b4e0a63f9ca8c1$export$7d727cacaa7cea1e, (v) => $d4b4e0a63f9ca8c1$export$7d727cacaa7cea1e = v);
153
+ $parcel$export($d4b4e0a63f9ca8c1$exports, "spectrum-ColorHandle-color", () => $d4b4e0a63f9ca8c1$export$afe4c366ed4e659c, (v) => $d4b4e0a63f9ca8c1$export$afe4c366ed4e659c = v);
154
+ var $d4b4e0a63f9ca8c1$export$bb6257a55a3c1efc;
155
+ var $d4b4e0a63f9ca8c1$export$e7dc768d35940237;
156
+ var $d4b4e0a63f9ca8c1$export$f39a09f249340e2a;
157
+ var $d4b4e0a63f9ca8c1$export$d8addbd273c4e00;
158
+ var $d4b4e0a63f9ca8c1$export$d35bc1e505d1ebbf;
159
+ var $d4b4e0a63f9ca8c1$export$40686f4fcb8a9916;
160
+ var $d4b4e0a63f9ca8c1$export$7d727cacaa7cea1e;
161
+ var $d4b4e0a63f9ca8c1$export$afe4c366ed4e659c;
162
+ $d4b4e0a63f9ca8c1$export$bb6257a55a3c1efc = "spectrum-ColorArea_35e2c0";
163
+ $d4b4e0a63f9ca8c1$export$e7dc768d35940237 = "is-focused_35e2c0";
164
+ $d4b4e0a63f9ca8c1$export$f39a09f249340e2a = "focus-ring_35e2c0";
165
+ $d4b4e0a63f9ca8c1$export$d8addbd273c4e00 = "spectrum-ColorArea-handle_35e2c0";
166
+ $d4b4e0a63f9ca8c1$export$d35bc1e505d1ebbf = "is-disabled_35e2c0";
167
+ $d4b4e0a63f9ca8c1$export$40686f4fcb8a9916 = "spectrum-ColorArea-gradient_35e2c0";
168
+ $d4b4e0a63f9ca8c1$export$7d727cacaa7cea1e = "spectrum-ColorArea-slider_35e2c0";
169
+ $d4b4e0a63f9ca8c1$export$afe4c366ed4e659c = "spectrum-ColorHandle-color_35e2c0";
170
+
171
+
172
+
173
+
174
+
175
+
176
+ function $5f016e950c2dc3a6$var$ColorArea(props, ref) {
177
+ props = $aAzec$reactspectrumprovider.useProviderProps(props);
178
+ let { isDisabled: isDisabled } = props;
179
+ let size = props.size && $aAzec$reactspectrumutils.dimensionValue(props.size);
180
+ let { styleProps: styleProps } = $aAzec$reactspectrumutils.useStyleProps(props);
181
+ let inputXRef = $aAzec$react.useRef();
182
+ let inputYRef = $aAzec$react.useRef();
183
+ let containerRef = $aAzec$reactspectrumutils.useFocusableRef(ref, inputXRef);
184
+ let state = $aAzec$reactstatelycolor.useColorAreaState(props);
185
+ let { colorAreaProps: colorAreaProps , gradientProps: gradientProps , xInputProps: xInputProps , yInputProps: yInputProps , thumbProps: thumbProps } = $aAzec$reactariacolor.useColorArea({
186
+ ...props,
187
+ inputXRef: inputXRef,
188
+ inputYRef: inputYRef,
189
+ containerRef: containerRef
190
+ }, state);
191
+ let { focusProps: focusProps , isFocusVisible: isFocusVisible } = $aAzec$reactariafocus.useFocusRing();
192
+ return(/*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("div", {
193
+ ...colorAreaProps,
194
+ className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($d4b4e0a63f9ca8c1$exports)), 'spectrum-ColorArea', {
195
+ 'is-disabled': isDisabled
196
+ }, styleProps.className),
197
+ ref: containerRef,
198
+ style: {
199
+ ...colorAreaProps.style,
200
+ ...styleProps.style,
201
+ // Workaround around https://github.com/adobe/spectrum-css/issues/1032
202
+ width: size,
203
+ height: size
204
+ }
205
+ }, /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("div", {
206
+ ...gradientProps,
207
+ className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($d4b4e0a63f9ca8c1$exports)), 'spectrum-ColorArea-gradient')
208
+ }), /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement($2b9adc23f6c7cae1$export$a3cc47cee1c1ccc, {
209
+ value: state.getDisplayColor(),
210
+ isFocused: isFocusVisible,
211
+ isDisabled: isDisabled,
212
+ isDragging: state.isDragging,
213
+ className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($d4b4e0a63f9ca8c1$exports)), 'spectrum-ColorArea-handle'),
214
+ ...thumbProps
215
+ }, /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("div", {
216
+ role: "presentation"
217
+ }, /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("input", {
218
+ className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($d4b4e0a63f9ca8c1$exports)), 'spectrum-ColorArea-slider'),
219
+ ...$aAzec$reactariautils.mergeProps(xInputProps, focusProps),
220
+ ref: inputXRef
221
+ }), /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("input", {
222
+ className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($d4b4e0a63f9ca8c1$exports)), 'spectrum-ColorArea-slider'),
223
+ ...$aAzec$reactariautils.mergeProps(yInputProps, focusProps),
224
+ ref: inputYRef
225
+ })))));
226
+ }
227
+ let $5f016e950c2dc3a6$export$b2103f68a961418e = /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).forwardRef($5f016e950c2dc3a6$var$ColorArea);
228
+
229
+
230
+ var $63a2864687444ae1$exports = {};
231
+
232
+ $parcel$export($63a2864687444ae1$exports, "ColorWheel", () => $63a2864687444ae1$export$f80663f808113381);
233
+
234
+
235
+
236
+ var $8fc6b1a2f4e7f682$exports = {};
237
+
238
+ $parcel$export($8fc6b1a2f4e7f682$exports, "spectrum-ColorWheel", () => $8fc6b1a2f4e7f682$export$b70a5ca28702fbc6, (v) => $8fc6b1a2f4e7f682$export$b70a5ca28702fbc6 = v);
239
+ $parcel$export($8fc6b1a2f4e7f682$exports, "is-focused", () => $8fc6b1a2f4e7f682$export$e7dc768d35940237, (v) => $8fc6b1a2f4e7f682$export$e7dc768d35940237 = v);
240
+ $parcel$export($8fc6b1a2f4e7f682$exports, "spectrum-ColorWheel-handle", () => $8fc6b1a2f4e7f682$export$4cd23920eb8ac056, (v) => $8fc6b1a2f4e7f682$export$4cd23920eb8ac056 = v);
241
+ $parcel$export($8fc6b1a2f4e7f682$exports, "spectrum-ColorWheel-slider", () => $8fc6b1a2f4e7f682$export$f476ddda713d62b, (v) => $8fc6b1a2f4e7f682$export$f476ddda713d62b = v);
242
+ $parcel$export($8fc6b1a2f4e7f682$exports, "is-disabled", () => $8fc6b1a2f4e7f682$export$d35bc1e505d1ebbf, (v) => $8fc6b1a2f4e7f682$export$d35bc1e505d1ebbf = v);
243
+ $parcel$export($8fc6b1a2f4e7f682$exports, "is-dragged", () => $8fc6b1a2f4e7f682$export$8778c911bed6c759, (v) => $8fc6b1a2f4e7f682$export$8778c911bed6c759 = v);
244
+ $parcel$export($8fc6b1a2f4e7f682$exports, "spectrum-ColorWheel-gradient", () => $8fc6b1a2f4e7f682$export$9afaa791d7500a9b, (v) => $8fc6b1a2f4e7f682$export$9afaa791d7500a9b = v);
245
+ $parcel$export($8fc6b1a2f4e7f682$exports, "spectrum-ColorWheel-segment", () => $8fc6b1a2f4e7f682$export$ada9fbffdaa4f10, (v) => $8fc6b1a2f4e7f682$export$ada9fbffdaa4f10 = v);
246
+ var $8fc6b1a2f4e7f682$export$b70a5ca28702fbc6;
247
+ var $8fc6b1a2f4e7f682$export$e7dc768d35940237;
248
+ var $8fc6b1a2f4e7f682$export$4cd23920eb8ac056;
249
+ var $8fc6b1a2f4e7f682$export$f476ddda713d62b;
250
+ var $8fc6b1a2f4e7f682$export$d35bc1e505d1ebbf;
251
+ var $8fc6b1a2f4e7f682$export$8778c911bed6c759;
252
+ var $8fc6b1a2f4e7f682$export$9afaa791d7500a9b;
253
+ var $8fc6b1a2f4e7f682$export$ada9fbffdaa4f10;
254
+ $8fc6b1a2f4e7f682$export$b70a5ca28702fbc6 = "spectrum-ColorWheel_31462a";
255
+ $8fc6b1a2f4e7f682$export$e7dc768d35940237 = "is-focused_31462a";
256
+ $8fc6b1a2f4e7f682$export$4cd23920eb8ac056 = "spectrum-ColorWheel-handle_31462a";
257
+ $8fc6b1a2f4e7f682$export$f476ddda713d62b = "spectrum-ColorWheel-slider_31462a";
258
+ $8fc6b1a2f4e7f682$export$d35bc1e505d1ebbf = "is-disabled_31462a";
259
+ $8fc6b1a2f4e7f682$export$8778c911bed6c759 = "is-dragged_31462a";
260
+ $8fc6b1a2f4e7f682$export$9afaa791d7500a9b = "spectrum-ColorWheel-gradient_31462a";
261
+ $8fc6b1a2f4e7f682$export$ada9fbffdaa4f10 = "spectrum-ColorWheel-segment_31462a";
262
+
263
+
264
+
265
+
266
+
267
+
268
+
269
+ const $63a2864687444ae1$var$WHEEL_THICKNESS = 24;
270
+ function $63a2864687444ae1$var$ColorWheel(props, ref) {
271
+ props = $aAzec$reactspectrumprovider.useProviderProps(props);
272
+ let { isDisabled: isDisabled } = props;
273
+ let size = props.size && $aAzec$reactspectrumutils.dimensionValue(props.size);
274
+ let { styleProps: styleProps } = $aAzec$reactspectrumutils.useStyleProps(props);
275
+ let inputRef = $aAzec$react.useRef(null);
276
+ let containerRef = $aAzec$reactspectrumutils.useFocusableRef(ref, inputRef);
277
+ let [wheelRadius, setWheelRadius] = $aAzec$react.useState(null);
278
+ let [wheelThickness, setWheelThickness] = $aAzec$react.useState($63a2864687444ae1$var$WHEEL_THICKNESS);
279
+ let resizeHandler = $aAzec$react.useCallback(()=>{
280
+ if (containerRef.current) {
281
+ setWheelRadius(containerRef.current.offsetWidth / 2);
282
+ let thickness = window.getComputedStyle(containerRef.current).getPropertyValue('--spectrum-colorwheel-track-thickness');
283
+ if (thickness) setWheelThickness(parseInt(thickness, 10));
284
+ }
285
+ }, [
286
+ containerRef,
287
+ setWheelRadius,
288
+ setWheelThickness
289
+ ]);
290
+ $aAzec$react.useEffect(()=>{
291
+ // the size observer's fallback to the window resize event doesn't fire on mount
292
+ if (wheelRadius == null) resizeHandler();
293
+ }, [
294
+ wheelRadius,
295
+ resizeHandler
296
+ ]);
297
+ $aAzec$reactariautils.useResizeObserver({
298
+ ref: containerRef,
299
+ onResize: resizeHandler
300
+ });
301
+ let state = $aAzec$reactstatelycolor.useColorWheelState(props);
302
+ let { trackProps: trackProps , inputProps: inputProps , thumbProps: thumbProps } = $aAzec$reactariacolor.useColorWheel({
303
+ ...props,
304
+ innerRadius: wheelRadius - wheelThickness,
305
+ outerRadius: wheelRadius
306
+ }, state, inputRef);
307
+ let { focusProps: focusProps , isFocusVisible: isFocusVisible } = $aAzec$reactariafocus.useFocusRing();
308
+ return(/*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("div", {
309
+ className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($8fc6b1a2f4e7f682$exports)), 'spectrum-ColorWheel', {
310
+ 'is-disabled': isDisabled
311
+ }, styleProps.className),
312
+ ref: containerRef,
313
+ style: {
314
+ ...styleProps.style,
315
+ // Workaround around https://github.com/adobe/spectrum-css/issues/1032
316
+ // @ts-ignore
317
+ 'width': size,
318
+ 'height': size
319
+ }
320
+ }, /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("div", {
321
+ ...trackProps,
322
+ className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($8fc6b1a2f4e7f682$exports)), 'spectrum-ColorWheel-gradient')
323
+ }), /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement($2b9adc23f6c7cae1$export$a3cc47cee1c1ccc, {
324
+ value: state.getDisplayColor(),
325
+ isFocused: isFocusVisible,
326
+ isDisabled: isDisabled,
327
+ isDragging: state.isDragging,
328
+ className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($8fc6b1a2f4e7f682$exports)), 'spectrum-ColorWheel-handle'),
329
+ ...thumbProps
330
+ }, /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("input", {
331
+ ...focusProps,
332
+ className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($8fc6b1a2f4e7f682$exports)), 'spectrum-ColorWheel-slider'),
333
+ ...inputProps,
334
+ ref: inputRef
335
+ }))));
248
336
  }
249
337
  /**
250
338
  * 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
- }, label && /*#__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
- })))));
339
+ */ let $63a2864687444ae1$export$f80663f808113381 = /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).forwardRef($63a2864687444ae1$var$ColorWheel);
340
+
341
+
342
+ var $4537dec0de08c277$exports = {};
343
+
344
+ $parcel$export($4537dec0de08c277$exports, "ColorSlider", () => $4537dec0de08c277$export$44fd664bcca5b6fb);
345
+
346
+
347
+
348
+
349
+
350
+ var $28060baf29cc5ac7$exports = {};
351
+
352
+ $parcel$export($28060baf29cc5ac7$exports, "spectrum-ColorSlider", () => $28060baf29cc5ac7$export$a5f8b0989b27a604, (v) => $28060baf29cc5ac7$export$a5f8b0989b27a604 = v);
353
+ $parcel$export($28060baf29cc5ac7$exports, "is-focused", () => $28060baf29cc5ac7$export$e7dc768d35940237, (v) => $28060baf29cc5ac7$export$e7dc768d35940237 = v);
354
+ $parcel$export($28060baf29cc5ac7$exports, "spectrum-ColorSlider-handle", () => $28060baf29cc5ac7$export$8c273ba92fabe1f1, (v) => $28060baf29cc5ac7$export$8c273ba92fabe1f1 = v);
355
+ $parcel$export($28060baf29cc5ac7$exports, "spectrum-ColorSlider-slider", () => $28060baf29cc5ac7$export$2f08b72944af536, (v) => $28060baf29cc5ac7$export$2f08b72944af536 = v);
356
+ $parcel$export($28060baf29cc5ac7$exports, "spectrum-ColorSlider-container--horizontal", () => $28060baf29cc5ac7$export$33e97914f6746614, (v) => $28060baf29cc5ac7$export$33e97914f6746614 = v);
357
+ $parcel$export($28060baf29cc5ac7$exports, "spectrum-ColorSlider-container--vertical", () => $28060baf29cc5ac7$export$cd1c093289104c66, (v) => $28060baf29cc5ac7$export$cd1c093289104c66 = v);
358
+ $parcel$export($28060baf29cc5ac7$exports, "is-disabled", () => $28060baf29cc5ac7$export$d35bc1e505d1ebbf, (v) => $28060baf29cc5ac7$export$d35bc1e505d1ebbf = v);
359
+ $parcel$export($28060baf29cc5ac7$exports, "spectrum-ColorSlider--vertical", () => $28060baf29cc5ac7$export$83dcf61b398bfaf1, (v) => $28060baf29cc5ac7$export$83dcf61b398bfaf1 = v);
360
+ var $28060baf29cc5ac7$export$a5f8b0989b27a604;
361
+ var $28060baf29cc5ac7$export$e7dc768d35940237;
362
+ var $28060baf29cc5ac7$export$8c273ba92fabe1f1;
363
+ var $28060baf29cc5ac7$export$2f08b72944af536;
364
+ var $28060baf29cc5ac7$export$33e97914f6746614;
365
+ var $28060baf29cc5ac7$export$cd1c093289104c66;
366
+ var $28060baf29cc5ac7$export$d35bc1e505d1ebbf;
367
+ var $28060baf29cc5ac7$export$83dcf61b398bfaf1;
368
+ $28060baf29cc5ac7$export$a5f8b0989b27a604 = "spectrum-ColorSlider_a5bb06";
369
+ $28060baf29cc5ac7$export$e7dc768d35940237 = "is-focused_a5bb06";
370
+ $28060baf29cc5ac7$export$8c273ba92fabe1f1 = "spectrum-ColorSlider-handle_a5bb06";
371
+ $28060baf29cc5ac7$export$2f08b72944af536 = "spectrum-ColorSlider-slider_a5bb06";
372
+ $28060baf29cc5ac7$export$33e97914f6746614 = "spectrum-ColorSlider-container--horizontal_a5bb06";
373
+ $28060baf29cc5ac7$export$cd1c093289104c66 = "spectrum-ColorSlider-container--vertical_a5bb06";
374
+ $28060baf29cc5ac7$export$d35bc1e505d1ebbf = "is-disabled_a5bb06";
375
+ $28060baf29cc5ac7$export$83dcf61b398bfaf1 = "spectrum-ColorSlider--vertical_a5bb06";
376
+
377
+
378
+
379
+
380
+
381
+
382
+
383
+ function $4537dec0de08c277$var$ColorSlider(props, ref) {
384
+ props = $aAzec$reactspectrumprovider.useProviderProps(props);
385
+ let { isDisabled: isDisabled , channel: channel , orientation: orientation , label: label , showValueLabel: showValueLabel , 'aria-label': ariaLabel } = props;
386
+ let vertical = orientation === 'vertical';
387
+ let { styleProps: styleProps } = $aAzec$reactspectrumutils.useStyleProps(props);
388
+ let { locale: locale } = $aAzec$reactariai18n.useLocale();
389
+ let inputRef = $aAzec$react.useRef();
390
+ let trackRef = $aAzec$react.useRef();
391
+ let domRef = $aAzec$reactspectrumutils.useFocusableRef(ref, inputRef);
392
+ let state = $aAzec$reactstatelycolor.useColorSliderState({
393
+ ...props,
394
+ locale: locale
395
+ });
396
+ // If vertical and a label is provided, use it as an aria-label instead.
397
+ if (vertical && label) {
398
+ ariaLabel = ariaLabel || (typeof label === 'string' ? label : null);
399
+ label = null;
400
+ }
401
+ // If no external label, aria-label or aria-labelledby is provided,
402
+ // default to displaying the localized channel value.
403
+ // Specifically check if label is undefined. If label is `null` then display no visible label.
404
+ // A default aria-label is provided by useColorSlider in that case.
405
+ if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) label = state.value.getChannelName(channel, locale);
406
+ // Show the value label by default if there is a visible label
407
+ if (showValueLabel == null) showValueLabel = !!label;
408
+ let { inputProps: inputProps , thumbProps: thumbProps , trackProps: trackProps , labelProps: labelProps , outputProps: outputProps } = $aAzec$reactariacolor.useColorSlider({
409
+ ...props,
410
+ label: label,
411
+ 'aria-label': ariaLabel,
412
+ trackRef: trackRef,
413
+ inputRef: inputRef
414
+ }, state);
415
+ let { isFocusVisible: isFocusVisible } = $aAzec$reactariainteractions.useFocusVisible();
416
+ let [isFocused, setIsFocused] = $aAzec$react.useState(false);
417
+ let { focusProps: focusProps } = $aAzec$reactariainteractions.useFocus({
418
+ isDisabled: isDisabled,
419
+ onFocusChange: setIsFocused
420
+ });
421
+ let alignLabel;
422
+ if (vertical) alignLabel = 'center';
423
+ else if (label != null && showValueLabel) alignLabel = 'space-between';
424
+ else if (label != null) alignLabel = 'flex-start';
425
+ else if (showValueLabel) alignLabel = 'flex-end';
426
+ return(/*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("div", {
427
+ ref: domRef,
428
+ ...styleProps,
429
+ className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($28060baf29cc5ac7$exports)), {
430
+ 'spectrum-ColorSlider-container--horizontal': !vertical,
431
+ 'spectrum-ColorSlider-container--vertical': vertical
432
+ })
433
+ }, label && /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement($aAzec$reactspectrumlayout.Flex, {
434
+ direction: "row",
435
+ justifyContent: alignLabel
436
+ }, /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement($aAzec$reactspectrumlabel.Label, labelProps, label), showValueLabel && /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement($aAzec$reactspectrumlabel.Label, {
437
+ elementType: "span"
438
+ }, /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("output", outputProps, state.value.formatChannelValue(channel, locale)))), /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("div", {
439
+ ...trackProps,
440
+ ref: trackRef,
441
+ className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($28060baf29cc5ac7$exports)), 'spectrum-ColorSlider', {
442
+ 'is-disabled': isDisabled,
443
+ 'spectrum-ColorSlider--vertical': vertical
444
+ })
445
+ }, /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement($2b9adc23f6c7cae1$export$a3cc47cee1c1ccc, {
446
+ value: state.getDisplayColor(),
447
+ isFocused: isFocused && isFocusVisible,
448
+ isDisabled: isDisabled,
449
+ isDragging: state.isThumbDragging(0),
450
+ className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($28060baf29cc5ac7$exports)), 'spectrum-ColorSlider-handle'),
451
+ ...thumbProps
452
+ }, /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("input", {
453
+ ...inputProps,
454
+ ...focusProps,
455
+ ref: inputRef,
456
+ className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($28060baf29cc5ac7$exports)), 'spectrum-ColorSlider-slider')
457
+ })))));
375
458
  }
376
459
  /**
377
460
  * ColorSliders allow users to adjust an individual channel of a color value.
378
- */
461
+ */ let $4537dec0de08c277$export$44fd664bcca5b6fb = /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).forwardRef($4537dec0de08c277$var$ColorSlider);
462
+
463
+
464
+ var $8bdb9bc27ff3debb$exports = {};
465
+
466
+ $parcel$export($8bdb9bc27ff3debb$exports, "ColorField", () => $8bdb9bc27ff3debb$export$b865d4358897bb17);
467
+
379
468
 
469
+ var $ddec4d6aa21146c4$exports = {};
380
470
 
381
- let ColorSlider = /*#__PURE__*/_react.forwardRef($fb4f131139da532ca621e724fdbef3c$var$ColorSlider);
471
+ $parcel$export($ddec4d6aa21146c4$exports, "react-spectrum-ColorField-input", () => $ddec4d6aa21146c4$export$7d80c6630a750b1, (v) => $ddec4d6aa21146c4$export$7d80c6630a750b1 = v);
472
+ var $ddec4d6aa21146c4$export$7d80c6630a750b1;
473
+ $ddec4d6aa21146c4$export$7d80c6630a750b1 = "react-spectrum-ColorField-input_7bde3a";
382
474
 
383
- exports.ColorSlider = ColorSlider;
384
475
 
385
- function $b25d8991f57211cb8e429d74bf3d19f7$var$ColorField(props, ref) {
386
- props = useProviderProps(props);
387
476
 
388
- let otherProps = _babelRuntimeHelpersObjectWithoutPropertiesLoose(props, ["value", "defaultValue", "onChange"]);
389
477
 
390
- let state = useColorFieldState(props);
391
- let inputRef = useRef();
392
- let {
393
- labelProps,
394
- inputProps
395
- } = useColorField(otherProps, state, inputRef);
396
- return /*#__PURE__*/_react.createElement(TextFieldBase, _babelRuntimeHelpersExtends({}, otherProps, {
397
- ref: ref,
398
- inputRef: inputRef,
399
- labelProps: labelProps,
400
- inputProps: inputProps
401
- }));
478
+
479
+
480
+ function $8bdb9bc27ff3debb$var$ColorField(props, ref) {
481
+ props = $aAzec$reactspectrumprovider.useProviderProps(props);
482
+ let { value: // These disabled props are handled by the state hook
483
+ value , defaultValue: defaultValue , onChange: onChange , ...otherProps } = props;
484
+ let state = $aAzec$reactstatelycolor.useColorFieldState(props);
485
+ let inputRef = $aAzec$react.useRef();
486
+ let { labelProps: labelProps , inputProps: inputProps } = $aAzec$reactariacolor.useColorField(otherProps, state, inputRef);
487
+ 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');
488
+ return(/*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement($aAzec$reactspectrumtextfield.TextFieldBase, {
489
+ ...otherProps,
490
+ ref: ref,
491
+ inputRef: inputRef,
492
+ labelProps: labelProps,
493
+ inputProps: inputProps,
494
+ inputClassName: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($ddec4d6aa21146c4$exports)), 'react-spectrum-ColorField-input')
495
+ }));
402
496
  }
497
+ /**
498
+ * ColorFields allow users to enter a color in #rrggbb hexadecimal format.
499
+ */ const $8bdb9bc27ff3debb$export$b865d4358897bb17 = /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).forwardRef($8bdb9bc27ff3debb$var$ColorField);
500
+
501
+
502
+ $parcel$exportWildcard(module.exports, $5f016e950c2dc3a6$exports);
503
+ $parcel$exportWildcard(module.exports, $63a2864687444ae1$exports);
504
+ $parcel$exportWildcard(module.exports, $4537dec0de08c277$exports);
505
+ $parcel$exportWildcard(module.exports, $8bdb9bc27ff3debb$exports);
403
506
 
404
- const ColorField = /*#__PURE__*/_react.forwardRef($b25d8991f57211cb8e429d74bf3d19f7$var$ColorField);
405
507
 
406
- exports.ColorField = ColorField;
407
508
  //# sourceMappingURL=main.js.map