@react-spectrum/color 3.0.1 → 3.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ColorArea.main.js +2 -5
- package/dist/ColorArea.main.js.map +1 -1
- package/dist/ColorArea.mjs +2 -5
- package/dist/ColorArea.module.js +2 -5
- package/dist/ColorArea.module.js.map +1 -1
- package/dist/ColorEditor.f85fa1f2.css +20 -0
- package/dist/ColorEditor.f85fa1f2.css.map +1 -0
- package/dist/ColorEditor.main.js +13 -16
- package/dist/ColorEditor.main.js.map +1 -1
- package/dist/ColorEditor.mjs +13 -16
- package/dist/ColorEditor.module.js +13 -16
- package/dist/ColorEditor.module.js.map +1 -1
- package/dist/ColorField.main.js +2 -5
- package/dist/ColorField.main.js.map +1 -1
- package/dist/ColorField.mjs +2 -5
- package/dist/ColorField.module.js +2 -5
- package/dist/ColorField.module.js.map +1 -1
- package/dist/ColorPicker.96797a19.css +206 -0
- package/dist/ColorPicker.96797a19.css.map +1 -0
- package/dist/ColorPicker.main.js +37 -40
- package/dist/ColorPicker.main.js.map +1 -1
- package/dist/ColorPicker.mjs +37 -40
- package/dist/ColorPicker.module.js +37 -40
- package/dist/ColorPicker.module.js.map +1 -1
- package/dist/ColorSlider.main.js +3 -6
- package/dist/ColorSlider.main.js.map +1 -1
- package/dist/ColorSlider.mjs +3 -6
- package/dist/ColorSlider.module.js +3 -6
- package/dist/ColorSlider.module.js.map +1 -1
- package/dist/ColorSwatch.fabed858.css +260 -0
- package/dist/ColorSwatch.fabed858.css.map +1 -0
- package/dist/ColorSwatch.main.js +31 -34
- package/dist/ColorSwatch.main.js.map +1 -1
- package/dist/ColorSwatch.mjs +32 -35
- package/dist/ColorSwatch.module.js +32 -35
- package/dist/ColorSwatch.module.js.map +1 -1
- package/dist/ColorSwatchPicker.25f8fb63.css +356 -0
- package/dist/ColorSwatchPicker.25f8fb63.css.map +1 -0
- package/dist/ColorSwatchPicker.main.js +42 -45
- package/dist/ColorSwatchPicker.main.js.map +1 -1
- package/dist/ColorSwatchPicker.mjs +42 -45
- package/dist/ColorSwatchPicker.module.js +42 -45
- package/dist/ColorSwatchPicker.module.js.map +1 -1
- package/dist/ColorWheel.main.js +2 -6
- package/dist/ColorWheel.main.js.map +1 -1
- package/dist/ColorWheel.mjs +2 -6
- package/dist/ColorWheel.module.js +2 -6
- package/dist/ColorWheel.module.js.map +1 -1
- package/dist/colorhandle_vars_css.main.js.map +1 -1
- package/dist/colorhandle_vars_css.module.js.map +1 -1
- package/dist/colorslider_vars_css.main.js.map +1 -1
- package/dist/colorslider_vars_css.module.js.map +1 -1
- package/dist/colorwheel_vars_css.main.js.map +1 -1
- package/dist/colorwheel_vars_css.module.js.map +1 -1
- package/dist/types.d.ts +7 -7
- package/dist/types.d.ts.map +1 -1
- package/dist/{vars.d78ec0e6.css → vars.a54898d8.css} +2 -2
- package/dist/{vars.d78ec0e6.css.map → vars.a54898d8.css.map} +1 -1
- package/package.json +23 -23
- package/src/ColorArea.tsx +5 -8
- package/src/ColorEditor.tsx +5 -8
- package/src/ColorField.tsx +5 -8
- package/src/ColorPicker.tsx +5 -8
- package/src/ColorSlider.tsx +5 -8
- package/src/ColorSwatch.tsx +5 -8
- package/src/ColorSwatchPicker.tsx +5 -8
- package/src/ColorWheel.tsx +5 -9
- package/dist/ColorEditor.32e497e8.css +0 -20
- package/dist/ColorEditor.32e497e8.css.map +0 -1
- package/dist/ColorPicker.ab9f47c0.css +0 -204
- package/dist/ColorPicker.ab9f47c0.css.map +0 -1
- package/dist/ColorSwatch.f6e6f811.css +0 -260
- package/dist/ColorSwatch.f6e6f811.css.map +0 -1
- package/dist/ColorSwatchPicker.1575be06.css +0 -356
- package/dist/ColorSwatchPicker.1575be06.css.map +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "./ColorSwatchPicker.
|
|
1
|
+
import "./ColorSwatchPicker.25f8fb63.css";
|
|
2
2
|
import {SpectrumColorSwatchContext as $d68786ae409fa722$export$8529d7908a78c058} from "./ColorSwatch.mjs";
|
|
3
3
|
import {ColorSwatchPicker as $1TpDU$ColorSwatchPicker, ColorSwatchPickerItem as $1TpDU$ColorSwatchPickerItem} from "react-aria-components";
|
|
4
4
|
import $1TpDU$react, {forwardRef as $1TpDU$forwardRef} from "react";
|
|
@@ -18,7 +18,7 @@ import {useStyleProps as $1TpDU$useStyleProps, useDOMRef as $1TpDU$useDOMRef} fr
|
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
const $4919bc07654f325c$export$b46792416e3d8515 = /*#__PURE__*/ (0, $1TpDU$forwardRef)(function ColorSwatchPicker(props, ref) {
|
|
22
22
|
let { density: density = 'regular', size: size = 'M', rounding: rounding = 'none', ...otherProps } = props;
|
|
23
23
|
let { styleProps: styleProps } = (0, $1TpDU$useStyleProps)(props);
|
|
24
24
|
let domRef = (0, $1TpDU$useDOMRef)(ref);
|
|
@@ -28,14 +28,14 @@ function $4919bc07654f325c$var$ColorSwatchPicker(props, ref) {
|
|
|
28
28
|
ref: domRef,
|
|
29
29
|
className: styleProps.className + function anonymous(props) {
|
|
30
30
|
let rules = "";
|
|
31
|
-
rules += '
|
|
32
|
-
rules += '
|
|
33
|
-
if (props.density === "spacious") rules += '
|
|
34
|
-
else if (props.density === "regular") rules += '
|
|
35
|
-
else if (props.density === "compact") rules += '
|
|
36
|
-
if (props.density === "spacious") rules += '
|
|
37
|
-
else if (props.density === "regular") rules += '
|
|
38
|
-
else if (props.density === "compact") rules += '
|
|
31
|
+
rules += ' s1-_Ss1-d';
|
|
32
|
+
rules += ' s1-_0s1-a';
|
|
33
|
+
if (props.density === "spacious") rules += ' s1-ls1-c';
|
|
34
|
+
else if (props.density === "regular") rules += ' s1-ls1-b';
|
|
35
|
+
else if (props.density === "compact") rules += ' s1-ls1-F';
|
|
36
|
+
if (props.density === "spacious") rules += ' s1-ms1-c';
|
|
37
|
+
else if (props.density === "regular") rules += ' s1-ms1-b';
|
|
38
|
+
else if (props.density === "compact") rules += ' s1-ms1-F';
|
|
39
39
|
return rules;
|
|
40
40
|
}({
|
|
41
41
|
density: density
|
|
@@ -47,34 +47,31 @@ function $4919bc07654f325c$var$ColorSwatchPicker(props, ref) {
|
|
|
47
47
|
rounding: rounding
|
|
48
48
|
}
|
|
49
49
|
}, props.children));
|
|
50
|
-
}
|
|
51
|
-
/**
|
|
52
|
-
* A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
|
|
53
|
-
*/ let $4919bc07654f325c$export$b46792416e3d8515 = /*#__PURE__*/ (0, $1TpDU$forwardRef)($4919bc07654f325c$var$ColorSwatchPicker);
|
|
50
|
+
});
|
|
54
51
|
function $4919bc07654f325c$var$useWrapper(swatch, color, rounding) {
|
|
55
52
|
return /*#__PURE__*/ (0, $1TpDU$react).createElement((0, $1TpDU$ColorSwatchPickerItem), {
|
|
56
53
|
color: color,
|
|
57
54
|
className: (renderProps)=>(function anonymous(props) {
|
|
58
55
|
let rules = "";
|
|
59
|
-
if (props.isFocusVisible) rules += '
|
|
60
|
-
else rules += '
|
|
61
|
-
rules += '
|
|
62
|
-
rules += '
|
|
63
|
-
rules += '
|
|
64
|
-
rules += '
|
|
65
|
-
rules += '
|
|
66
|
-
if (props.rounding === "full") rules += '
|
|
67
|
-
else if (props.rounding === "default") rules += '
|
|
68
|
-
else if (props.rounding === "none") rules += '
|
|
69
|
-
if (props.rounding === "full") rules += '
|
|
70
|
-
else if (props.rounding === "default") rules += '
|
|
71
|
-
else if (props.rounding === "none") rules += '
|
|
72
|
-
if (props.rounding === "full") rules += '
|
|
73
|
-
else if (props.rounding === "default") rules += '
|
|
74
|
-
else if (props.rounding === "none") rules += '
|
|
75
|
-
if (props.rounding === "full") rules += '
|
|
76
|
-
else if (props.rounding === "default") rules += '
|
|
77
|
-
else if (props.rounding === "none") rules += '
|
|
56
|
+
if (props.isFocusVisible) rules += ' s1-_Es1-b';
|
|
57
|
+
else rules += ' s1-_Es1-a';
|
|
58
|
+
rules += ' s1-ds1-as1-___D';
|
|
59
|
+
rules += ' s1-ds1-___I';
|
|
60
|
+
rules += ' s1-_Gs1-c';
|
|
61
|
+
rules += ' s1-_Fs1-c';
|
|
62
|
+
rules += ' s1-Xs1-c';
|
|
63
|
+
if (props.rounding === "full") rules += ' s1-_ps1-f';
|
|
64
|
+
else if (props.rounding === "default") rules += ' s1-_ps1-c';
|
|
65
|
+
else if (props.rounding === "none") rules += ' s1-_ps1-a';
|
|
66
|
+
if (props.rounding === "full") rules += ' s1-_qs1-f';
|
|
67
|
+
else if (props.rounding === "default") rules += ' s1-_qs1-c';
|
|
68
|
+
else if (props.rounding === "none") rules += ' s1-_qs1-a';
|
|
69
|
+
if (props.rounding === "full") rules += ' s1-_rs1-f';
|
|
70
|
+
else if (props.rounding === "default") rules += ' s1-_rs1-c';
|
|
71
|
+
else if (props.rounding === "none") rules += ' s1-_rs1-a';
|
|
72
|
+
if (props.rounding === "full") rules += ' s1-_ss1-f';
|
|
73
|
+
else if (props.rounding === "default") rules += ' s1-_ss1-c';
|
|
74
|
+
else if (props.rounding === "none") rules += ' s1-_ss1-a';
|
|
78
75
|
return rules;
|
|
79
76
|
})({
|
|
80
77
|
...renderProps,
|
|
@@ -84,18 +81,18 @@ function $4919bc07654f325c$var$useWrapper(swatch, color, rounding) {
|
|
|
84
81
|
"aria-hidden": true,
|
|
85
82
|
className: function anonymous(props) {
|
|
86
83
|
let rules = "";
|
|
87
|
-
rules += '
|
|
88
|
-
rules += '
|
|
89
|
-
rules += '
|
|
90
|
-
rules += '
|
|
91
|
-
rules += '
|
|
92
|
-
rules += '
|
|
93
|
-
rules += ' _o-1icpv9v';
|
|
94
|
-
rules += '
|
|
95
|
-
rules += ' _p-17zqamw';
|
|
96
|
-
rules += ' _q-17zqamw';
|
|
97
|
-
rules += ' _r-17zqamw';
|
|
98
|
-
rules += ' _s-17zqamw';
|
|
84
|
+
rules += ' s1-Xs1-a';
|
|
85
|
+
rules += ' s1-__ys1-a';
|
|
86
|
+
rules += ' s1-0s1-a';
|
|
87
|
+
rules += ' s1-2s1-a';
|
|
88
|
+
rules += ' s1-1s1-a';
|
|
89
|
+
rules += ' s1-3s1-a';
|
|
90
|
+
rules += ' s1-_o-1icpv9v';
|
|
91
|
+
rules += ' s1-_ts1-b';
|
|
92
|
+
rules += ' s1-_p-17zqamw';
|
|
93
|
+
rules += ' s1-_q-17zqamw';
|
|
94
|
+
rules += ' s1-_r-17zqamw';
|
|
95
|
+
rules += ' s1-_s-17zqamw';
|
|
99
96
|
return rules;
|
|
100
97
|
}()
|
|
101
98
|
})));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "./ColorSwatchPicker.
|
|
1
|
+
import "./ColorSwatchPicker.25f8fb63.css";
|
|
2
2
|
import {SpectrumColorSwatchContext as $d68786ae409fa722$export$8529d7908a78c058} from "./ColorSwatch.module.js";
|
|
3
3
|
import {ColorSwatchPicker as $1TpDU$ColorSwatchPicker, ColorSwatchPickerItem as $1TpDU$ColorSwatchPickerItem} from "react-aria-components";
|
|
4
4
|
import $1TpDU$react, {forwardRef as $1TpDU$forwardRef} from "react";
|
|
@@ -18,7 +18,7 @@ import {useStyleProps as $1TpDU$useStyleProps, useDOMRef as $1TpDU$useDOMRef} fr
|
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
const $4919bc07654f325c$export$b46792416e3d8515 = /*#__PURE__*/ (0, $1TpDU$forwardRef)(function ColorSwatchPicker(props, ref) {
|
|
22
22
|
let { density: density = 'regular', size: size = 'M', rounding: rounding = 'none', ...otherProps } = props;
|
|
23
23
|
let { styleProps: styleProps } = (0, $1TpDU$useStyleProps)(props);
|
|
24
24
|
let domRef = (0, $1TpDU$useDOMRef)(ref);
|
|
@@ -28,14 +28,14 @@ function $4919bc07654f325c$var$ColorSwatchPicker(props, ref) {
|
|
|
28
28
|
ref: domRef,
|
|
29
29
|
className: styleProps.className + function anonymous(props) {
|
|
30
30
|
let rules = "";
|
|
31
|
-
rules += '
|
|
32
|
-
rules += '
|
|
33
|
-
if (props.density === "spacious") rules += '
|
|
34
|
-
else if (props.density === "regular") rules += '
|
|
35
|
-
else if (props.density === "compact") rules += '
|
|
36
|
-
if (props.density === "spacious") rules += '
|
|
37
|
-
else if (props.density === "regular") rules += '
|
|
38
|
-
else if (props.density === "compact") rules += '
|
|
31
|
+
rules += ' s1-_Ss1-d';
|
|
32
|
+
rules += ' s1-_0s1-a';
|
|
33
|
+
if (props.density === "spacious") rules += ' s1-ls1-c';
|
|
34
|
+
else if (props.density === "regular") rules += ' s1-ls1-b';
|
|
35
|
+
else if (props.density === "compact") rules += ' s1-ls1-F';
|
|
36
|
+
if (props.density === "spacious") rules += ' s1-ms1-c';
|
|
37
|
+
else if (props.density === "regular") rules += ' s1-ms1-b';
|
|
38
|
+
else if (props.density === "compact") rules += ' s1-ms1-F';
|
|
39
39
|
return rules;
|
|
40
40
|
}({
|
|
41
41
|
density: density
|
|
@@ -47,34 +47,31 @@ function $4919bc07654f325c$var$ColorSwatchPicker(props, ref) {
|
|
|
47
47
|
rounding: rounding
|
|
48
48
|
}
|
|
49
49
|
}, props.children));
|
|
50
|
-
}
|
|
51
|
-
/**
|
|
52
|
-
* A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
|
|
53
|
-
*/ let $4919bc07654f325c$export$b46792416e3d8515 = /*#__PURE__*/ (0, $1TpDU$forwardRef)($4919bc07654f325c$var$ColorSwatchPicker);
|
|
50
|
+
});
|
|
54
51
|
function $4919bc07654f325c$var$useWrapper(swatch, color, rounding) {
|
|
55
52
|
return /*#__PURE__*/ (0, $1TpDU$react).createElement((0, $1TpDU$ColorSwatchPickerItem), {
|
|
56
53
|
color: color,
|
|
57
54
|
className: (renderProps)=>(function anonymous(props) {
|
|
58
55
|
let rules = "";
|
|
59
|
-
if (props.isFocusVisible) rules += '
|
|
60
|
-
else rules += '
|
|
61
|
-
rules += '
|
|
62
|
-
rules += '
|
|
63
|
-
rules += '
|
|
64
|
-
rules += '
|
|
65
|
-
rules += '
|
|
66
|
-
if (props.rounding === "full") rules += '
|
|
67
|
-
else if (props.rounding === "default") rules += '
|
|
68
|
-
else if (props.rounding === "none") rules += '
|
|
69
|
-
if (props.rounding === "full") rules += '
|
|
70
|
-
else if (props.rounding === "default") rules += '
|
|
71
|
-
else if (props.rounding === "none") rules += '
|
|
72
|
-
if (props.rounding === "full") rules += '
|
|
73
|
-
else if (props.rounding === "default") rules += '
|
|
74
|
-
else if (props.rounding === "none") rules += '
|
|
75
|
-
if (props.rounding === "full") rules += '
|
|
76
|
-
else if (props.rounding === "default") rules += '
|
|
77
|
-
else if (props.rounding === "none") rules += '
|
|
56
|
+
if (props.isFocusVisible) rules += ' s1-_Es1-b';
|
|
57
|
+
else rules += ' s1-_Es1-a';
|
|
58
|
+
rules += ' s1-ds1-as1-___D';
|
|
59
|
+
rules += ' s1-ds1-___I';
|
|
60
|
+
rules += ' s1-_Gs1-c';
|
|
61
|
+
rules += ' s1-_Fs1-c';
|
|
62
|
+
rules += ' s1-Xs1-c';
|
|
63
|
+
if (props.rounding === "full") rules += ' s1-_ps1-f';
|
|
64
|
+
else if (props.rounding === "default") rules += ' s1-_ps1-c';
|
|
65
|
+
else if (props.rounding === "none") rules += ' s1-_ps1-a';
|
|
66
|
+
if (props.rounding === "full") rules += ' s1-_qs1-f';
|
|
67
|
+
else if (props.rounding === "default") rules += ' s1-_qs1-c';
|
|
68
|
+
else if (props.rounding === "none") rules += ' s1-_qs1-a';
|
|
69
|
+
if (props.rounding === "full") rules += ' s1-_rs1-f';
|
|
70
|
+
else if (props.rounding === "default") rules += ' s1-_rs1-c';
|
|
71
|
+
else if (props.rounding === "none") rules += ' s1-_rs1-a';
|
|
72
|
+
if (props.rounding === "full") rules += ' s1-_ss1-f';
|
|
73
|
+
else if (props.rounding === "default") rules += ' s1-_ss1-c';
|
|
74
|
+
else if (props.rounding === "none") rules += ' s1-_ss1-a';
|
|
78
75
|
return rules;
|
|
79
76
|
})({
|
|
80
77
|
...renderProps,
|
|
@@ -84,18 +81,18 @@ function $4919bc07654f325c$var$useWrapper(swatch, color, rounding) {
|
|
|
84
81
|
"aria-hidden": true,
|
|
85
82
|
className: function anonymous(props) {
|
|
86
83
|
let rules = "";
|
|
87
|
-
rules += '
|
|
88
|
-
rules += '
|
|
89
|
-
rules += '
|
|
90
|
-
rules += '
|
|
91
|
-
rules += '
|
|
92
|
-
rules += '
|
|
93
|
-
rules += ' _o-1icpv9v';
|
|
94
|
-
rules += '
|
|
95
|
-
rules += ' _p-17zqamw';
|
|
96
|
-
rules += ' _q-17zqamw';
|
|
97
|
-
rules += ' _r-17zqamw';
|
|
98
|
-
rules += ' _s-17zqamw';
|
|
84
|
+
rules += ' s1-Xs1-a';
|
|
85
|
+
rules += ' s1-__ys1-a';
|
|
86
|
+
rules += ' s1-0s1-a';
|
|
87
|
+
rules += ' s1-2s1-a';
|
|
88
|
+
rules += ' s1-1s1-a';
|
|
89
|
+
rules += ' s1-3s1-a';
|
|
90
|
+
rules += ' s1-_o-1icpv9v';
|
|
91
|
+
rules += ' s1-_ts1-b';
|
|
92
|
+
rules += ' s1-_p-17zqamw';
|
|
93
|
+
rules += ' s1-_q-17zqamw';
|
|
94
|
+
rules += ' s1-_r-17zqamw';
|
|
95
|
+
rules += ' s1-_s-17zqamw';
|
|
99
96
|
return rules;
|
|
100
97
|
}()
|
|
101
98
|
})));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC;;;;
|
|
1
|
+
{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC;;;;AAiCM,MAAM,0DAAoB,CAAA,GAAA,iBAAS,EAAE,SAAS,kBAAkB,KAAqC,EAAE,GAA2B;IACvI,IAAI,WACF,UAAU,iBACV,OAAO,eACP,WAAW,QACX,GAAG,YACJ,GAAG;IACJ,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IACjC,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,wBAAoB;QAClB,GAAG,UAAU;QACd,OAAO,WAAW,KAAK;QACvB,KAAK;QACL,WAAW,WAAW,SAAS,GAAG;;;;;;;;;;;UAU/B;qBAAC;QAAO;qBACX,gCAAC,CAAA,GAAA,yCAAyB,EAAE,QAAQ;QAAC,OAAO;wBAAC;kBAAY;sBAAM;QAAQ;OACpE,MAAM,QAAQ;AAIvB;AAEA,SAAS,iCAAW,MAAoB,EAAE,KAAY,EAAE,QAA8C;IACpG,qBACE,gCAAC,CAAA,GAAA,4BAAwB;QACvB,OAAO;QACP,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;eAgBvB;gBAAC,GAAG,WAAW;0BAAE;YAAQ;OAC3B,CAAC,cAAC,UAAU,EAAC,iBAAM,kEACjB,QACA,4BACC,gCAAC;YACC,eAAA;YACA,WAAW;;;;;;;;;;;;;;;;;AAYvB","sources":["packages/@react-spectrum/color/src/ColorSwatchPicker.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem} from 'react-aria-components';\nimport {Color} from '@react-types/color';\nimport {DOMRef, StyleProps, ValueBase} from '@react-types/shared';\nimport React, {forwardRef, ReactElement, ReactNode} from 'react';\nimport {SpectrumColorSwatchContext, SpectrumColorSwatchProps} from './ColorSwatch';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useDOMRef, useStyleProps} from '@react-spectrum/utils';\n\nexport interface SpectrumColorSwatchPickerProps extends ValueBase<string | Color, Color>, StyleProps {\n /** The ColorSwatches within the ColorSwatchPicker. */\n children: ReactNode,\n /**\n * The amount of padding between the swatches.\n * @default \"regular\"\n */\n density?: 'compact' | 'regular' | 'spacious',\n /**\n * The size of the color swatches.\n * @default \"M\"\n */\n size?: 'XS' | 'S' | 'M' | 'L',\n /**\n * The corner rounding of the color swatches.\n * @default \"none\"\n */\n rounding?: 'none' | 'default' | 'full'\n}\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: SpectrumColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {\n let {\n density = 'regular',\n size = 'M',\n rounding = 'none',\n ...otherProps\n } = props;\n let {styleProps} = useStyleProps(props);\n let domRef = useDOMRef(ref);\n\n return (\n <AriaColorSwatchPicker\n {...otherProps}\n style={styleProps.style}\n ref={domRef}\n className={styleProps.className + style({\n display: 'flex',\n flexWrap: 'wrap',\n gap: {\n density: {\n compact: 0.5,\n regular: 1,\n spacious: 2\n }\n }\n })({density})}>\n <SpectrumColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n {props.children}\n </SpectrumColorSwatchContext.Provider>\n </AriaColorSwatchPicker>\n );\n});\n\nfunction useWrapper(swatch: ReactElement, color: Color, rounding: SpectrumColorSwatchProps['rounding']) {\n return (\n <AriaColorSwatchPickerItem\n color={color}\n className={renderProps => style({\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid'\n },\n outlineColor: 'focus-ring',\n outlineWidth: 2,\n outlineOffset: 2,\n position: 'relative',\n borderRadius: {\n rounding: {\n none: 'none',\n default: 'default',\n full: 'full'\n }\n }\n })({...renderProps, rounding})}>\n {({isSelected}) => (<>\n {swatch}\n {isSelected && (\n <div\n aria-hidden\n className={style({\n position: 'absolute',\n pointerEvents: 'none',\n inset: 0,\n boxShadow: '[inset 0 0 0 2px var(--spectrum-gray-900), inset 0 0 0 4px var(--spectrum-gray-50)]',\n forcedColorAdjust: 'none',\n borderRadius: '[inherit]'\n })()} />\n )}\n </>)}\n </AriaColorSwatchPickerItem>\n );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.module.js.map"}
|
package/dist/ColorWheel.main.js
CHANGED
|
@@ -41,7 +41,7 @@ $parcel$export(module.exports, "ColorWheel", () => $63a2864687444ae1$export$f806
|
|
|
41
41
|
|
|
42
42
|
|
|
43
43
|
const $63a2864687444ae1$var$WHEEL_THICKNESS = 24;
|
|
44
|
-
|
|
44
|
+
const $63a2864687444ae1$export$f80663f808113381 = /*#__PURE__*/ (0, ($parcel$interopDefault($gEgjt$react))).forwardRef(function ColorWheel(props, ref) {
|
|
45
45
|
props = (0, $gEgjt$reactspectrumprovider.useProviderProps)(props);
|
|
46
46
|
let inputRef = (0, $gEgjt$react.useRef)(null);
|
|
47
47
|
let containerRef = (0, $gEgjt$reactspectrumutils.useFocusableRef)(ref, inputRef);
|
|
@@ -88,7 +88,6 @@ function $63a2864687444ae1$var$ColorWheel(props, ref) {
|
|
|
88
88
|
style: {
|
|
89
89
|
...styleProps.style,
|
|
90
90
|
// Workaround around https://github.com/adobe/spectrum-css/issues/1032
|
|
91
|
-
// @ts-ignore
|
|
92
91
|
'width': size,
|
|
93
92
|
'height': size
|
|
94
93
|
}
|
|
@@ -109,10 +108,7 @@ function $63a2864687444ae1$var$ColorWheel(props, ref) {
|
|
|
109
108
|
...inputProps,
|
|
110
109
|
ref: inputRef
|
|
111
110
|
})));
|
|
112
|
-
}
|
|
113
|
-
/**
|
|
114
|
-
* ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
|
|
115
|
-
*/ let $63a2864687444ae1$export$f80663f808113381 = /*#__PURE__*/ (0, ($parcel$interopDefault($gEgjt$react))).forwardRef($63a2864687444ae1$var$ColorWheel);
|
|
111
|
+
});
|
|
116
112
|
|
|
117
113
|
|
|
118
114
|
//# sourceMappingURL=ColorWheel.main.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAeD,MAAM,wCAAkB;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAeD,MAAM,wCAAkB;AAKjB,MAAM,0DAAa,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,WAAW,KAA8B,EAAE,GAAiC;IAC9H,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,eAAe,CAAA,GAAA,yCAAc,EAAE,KAAK;IACxC,CAAC,OAAO,aAAa,GAAG,CAAA,GAAA,0CAAc,EAAE,OAAO,cAAc,CAAA,GAAA,4CAAgB;IAE7E,IAAI,cAAC,UAAU,EAAC,GAAG;IACnB,IAAI,OAAO,MAAM,IAAI,IAAI,CAAA,GAAA,wCAAa,EAAE,MAAM,IAAI;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IAGjC,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAO,EAAU;IACrD,IAAI,CAAC,gBAAgB,kBAAkB,GAAG,CAAA,GAAA,qBAAO,EAAE;IAEnD,IAAI,gBAAgB,CAAA,GAAA,wBAAU,EAAE;QAC9B,IAAI,aAAa,OAAO,EAAE;YACxB,eAAe,aAAa,OAAO,CAAC,WAAW,GAAG;YAClD,IAAI,YAAY,OAAO,gBAAgB,CAAC,aAAa,OAAO,EACzD,gBAAgB,CAAC;YACpB,IAAI,WACF,kBAAkB,SAAS,WAAW;QAE1C;IACF,GAAG;QAAC;QAAc;QAAgB;KAAkB;IAEpD,CAAA,GAAA,sBAAQ,EAAE;QACR,gFAAgF;QAChF,IAAI,gBAAgB,GAClB;IAEJ,GAAG;QAAC;QAAa;KAAc;IAE/B,CAAA,GAAA,uCAAgB,EAAE;QAChB,KAAK;QACL,UAAU;IACZ;IAEA,IAAI,QAAQ,CAAA,GAAA,2CAAiB,EAAE;IAE/B,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,mCAAY,EAAE;QACvD,GAAG,KAAK;QACR,aAAa,cAAc;QAC3B,aAAa;IACf,GAAG,OAAO;IAEV,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,kCAAW;IAE9C,qBACE,0DAAC;QACC,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL,uBACA;YACE,eAAe;QACjB,GACA,WAAW,SAAS;QAGxB,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,SAAS;YACT,UAAU;QACZ;qBACA,0DAAC;QAAK,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;sBACnD,0DAAC,CAAA,GAAA,oCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW;QACX,YAAY;QACZ,YAAY,MAAM,UAAU;QAC5B,cAAc;QACd,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,0DAAC;QAAO,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAAgC,GAAG,UAAU;QAAE,KAAK;;AAIjH","sources":["packages/@react-spectrum/color/src/ColorWheel.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {ColorWheelContext, useContextProps} from 'react-aria-components';\nimport {FocusableRef} from '@react-types/shared';\nimport React, {useCallback, useEffect, useRef, useState} from 'react';\nimport {SpectrumColorWheelProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheel} from '@react-aria/color';\nimport {useColorWheelState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useResizeObserver} from '@react-aria/utils';\n\nconst WHEEL_THICKNESS = 24;\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = React.forwardRef(function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let inputRef = useRef(null);\n let containerRef = useFocusableRef(ref, inputRef);\n [props, containerRef] = useContextProps(props, containerRef, ColorWheelContext);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n\n let [wheelRadius, setWheelRadius] = useState<number>(0);\n let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n let resizeHandler = useCallback(() => {\n if (containerRef.current) {\n setWheelRadius(containerRef.current.offsetWidth / 2);\n let thickness = window.getComputedStyle(containerRef.current)\n .getPropertyValue('--spectrum-colorwheel-track-thickness');\n if (thickness) {\n setWheelThickness(parseInt(thickness, 10));\n }\n }\n }, [containerRef, setWheelRadius, setWheelThickness]);\n\n useEffect(() => {\n // the size observer's fallback to the window resize event doesn't fire on mount\n if (wheelRadius === 0) {\n resizeHandler();\n }\n }, [wheelRadius, resizeHandler]);\n\n useResizeObserver({\n ref: containerRef,\n onResize: resizeHandler\n });\n\n let state = useColorWheelState(props);\n\n let {trackProps, inputProps, thumbProps} = useColorWheel({\n ...props,\n innerRadius: wheelRadius - wheelThickness,\n outerRadius: wheelRadius\n }, state, inputRef);\n\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n className={\n classNames(\n styles,\n 'spectrum-ColorWheel',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )\n }\n ref={containerRef}\n style={{\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n 'width': size,\n 'height': size\n }}>\n <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n containerRef={containerRef}\n className={classNames(styles, 'spectrum-ColorWheel-handle')}\n {...thumbProps}>\n <input {...focusProps} className={classNames(styles, 'spectrum-ColorWheel-slider')} {...inputProps} ref={inputRef} />\n </ColorThumb>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"ColorWheel.main.js.map"}
|
package/dist/ColorWheel.mjs
CHANGED
|
@@ -35,7 +35,7 @@ function $parcel$interopDefault(a) {
|
|
|
35
35
|
|
|
36
36
|
|
|
37
37
|
const $3aac1c27203f04b5$var$WHEEL_THICKNESS = 24;
|
|
38
|
-
|
|
38
|
+
const $3aac1c27203f04b5$export$f80663f808113381 = /*#__PURE__*/ (0, $bv4AR$react).forwardRef(function ColorWheel(props, ref) {
|
|
39
39
|
props = (0, $bv4AR$useProviderProps)(props);
|
|
40
40
|
let inputRef = (0, $bv4AR$useRef)(null);
|
|
41
41
|
let containerRef = (0, $bv4AR$useFocusableRef)(ref, inputRef);
|
|
@@ -82,7 +82,6 @@ function $3aac1c27203f04b5$var$ColorWheel(props, ref) {
|
|
|
82
82
|
style: {
|
|
83
83
|
...styleProps.style,
|
|
84
84
|
// Workaround around https://github.com/adobe/spectrum-css/issues/1032
|
|
85
|
-
// @ts-ignore
|
|
86
85
|
'width': size,
|
|
87
86
|
'height': size
|
|
88
87
|
}
|
|
@@ -103,10 +102,7 @@ function $3aac1c27203f04b5$var$ColorWheel(props, ref) {
|
|
|
103
102
|
...inputProps,
|
|
104
103
|
ref: inputRef
|
|
105
104
|
})));
|
|
106
|
-
}
|
|
107
|
-
/**
|
|
108
|
-
* ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
|
|
109
|
-
*/ let $3aac1c27203f04b5$export$f80663f808113381 = /*#__PURE__*/ (0, $bv4AR$react).forwardRef($3aac1c27203f04b5$var$ColorWheel);
|
|
105
|
+
});
|
|
110
106
|
|
|
111
107
|
|
|
112
108
|
export {$3aac1c27203f04b5$export$f80663f808113381 as ColorWheel};
|
|
@@ -35,7 +35,7 @@ function $parcel$interopDefault(a) {
|
|
|
35
35
|
|
|
36
36
|
|
|
37
37
|
const $3aac1c27203f04b5$var$WHEEL_THICKNESS = 24;
|
|
38
|
-
|
|
38
|
+
const $3aac1c27203f04b5$export$f80663f808113381 = /*#__PURE__*/ (0, $bv4AR$react).forwardRef(function ColorWheel(props, ref) {
|
|
39
39
|
props = (0, $bv4AR$useProviderProps)(props);
|
|
40
40
|
let inputRef = (0, $bv4AR$useRef)(null);
|
|
41
41
|
let containerRef = (0, $bv4AR$useFocusableRef)(ref, inputRef);
|
|
@@ -82,7 +82,6 @@ function $3aac1c27203f04b5$var$ColorWheel(props, ref) {
|
|
|
82
82
|
style: {
|
|
83
83
|
...styleProps.style,
|
|
84
84
|
// Workaround around https://github.com/adobe/spectrum-css/issues/1032
|
|
85
|
-
// @ts-ignore
|
|
86
85
|
'width': size,
|
|
87
86
|
'height': size
|
|
88
87
|
}
|
|
@@ -103,10 +102,7 @@ function $3aac1c27203f04b5$var$ColorWheel(props, ref) {
|
|
|
103
102
|
...inputProps,
|
|
104
103
|
ref: inputRef
|
|
105
104
|
})));
|
|
106
|
-
}
|
|
107
|
-
/**
|
|
108
|
-
* ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
|
|
109
|
-
*/ let $3aac1c27203f04b5$export$f80663f808113381 = /*#__PURE__*/ (0, $bv4AR$react).forwardRef($3aac1c27203f04b5$var$ColorWheel);
|
|
105
|
+
});
|
|
110
106
|
|
|
111
107
|
|
|
112
108
|
export {$3aac1c27203f04b5$export$f80663f808113381 as ColorWheel};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAeD,MAAM,wCAAkB;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAeD,MAAM,wCAAkB;AAKjB,MAAM,0DAAa,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,WAAW,KAA8B,EAAE,GAAiC;IAC9H,QAAQ,CAAA,GAAA,uBAAe,EAAE;IACzB,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,eAAe,CAAA,GAAA,sBAAc,EAAE,KAAK;IACxC,CAAC,OAAO,aAAa,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,cAAc,CAAA,GAAA,wBAAgB;IAE7E,IAAI,cAAC,UAAU,EAAC,GAAG;IACnB,IAAI,OAAO,MAAM,IAAI,IAAI,CAAA,GAAA,qBAAa,EAAE,MAAM,IAAI;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IAGjC,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,eAAO,EAAU;IACrD,IAAI,CAAC,gBAAgB,kBAAkB,GAAG,CAAA,GAAA,eAAO,EAAE;IAEnD,IAAI,gBAAgB,CAAA,GAAA,kBAAU,EAAE;QAC9B,IAAI,aAAa,OAAO,EAAE;YACxB,eAAe,aAAa,OAAO,CAAC,WAAW,GAAG;YAClD,IAAI,YAAY,OAAO,gBAAgB,CAAC,aAAa,OAAO,EACzD,gBAAgB,CAAC;YACpB,IAAI,WACF,kBAAkB,SAAS,WAAW;QAE1C;IACF,GAAG;QAAC;QAAc;QAAgB;KAAkB;IAEpD,CAAA,GAAA,gBAAQ,EAAE;QACR,gFAAgF;QAChF,IAAI,gBAAgB,GAClB;IAEJ,GAAG;QAAC;QAAa;KAAc;IAE/B,CAAA,GAAA,wBAAgB,EAAE;QAChB,KAAK;QACL,UAAU;IACZ;IAEA,IAAI,QAAQ,CAAA,GAAA,yBAAiB,EAAE;IAE/B,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;QACvD,GAAG,KAAK;QACR,aAAa,cAAc;QAC3B,aAAa;IACf,GAAG,OAAO;IAEV,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW;IAE9C,qBACE,gCAAC;QACC,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,4DAAK,GACL,uBACA;YACE,eAAe;QACjB,GACA,WAAW,SAAS;QAGxB,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,SAAS;YACT,UAAU;QACZ;qBACA,gCAAC;QAAK,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,4DAAK,GAAG;sBACnD,gCAAC,CAAA,GAAA,wCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW;QACX,YAAY;QACZ,YAAY,MAAM,UAAU;QAC5B,cAAc;QACd,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,4DAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,gCAAC;QAAO,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,4DAAK,GAAG;QAAgC,GAAG,UAAU;QAAE,KAAK;;AAIjH","sources":["packages/@react-spectrum/color/src/ColorWheel.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {ColorWheelContext, useContextProps} from 'react-aria-components';\nimport {FocusableRef} from '@react-types/shared';\nimport React, {useCallback, useEffect, useRef, useState} from 'react';\nimport {SpectrumColorWheelProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheel} from '@react-aria/color';\nimport {useColorWheelState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useResizeObserver} from '@react-aria/utils';\n\nconst WHEEL_THICKNESS = 24;\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = React.forwardRef(function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let inputRef = useRef(null);\n let containerRef = useFocusableRef(ref, inputRef);\n [props, containerRef] = useContextProps(props, containerRef, ColorWheelContext);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n\n let [wheelRadius, setWheelRadius] = useState<number>(0);\n let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n let resizeHandler = useCallback(() => {\n if (containerRef.current) {\n setWheelRadius(containerRef.current.offsetWidth / 2);\n let thickness = window.getComputedStyle(containerRef.current)\n .getPropertyValue('--spectrum-colorwheel-track-thickness');\n if (thickness) {\n setWheelThickness(parseInt(thickness, 10));\n }\n }\n }, [containerRef, setWheelRadius, setWheelThickness]);\n\n useEffect(() => {\n // the size observer's fallback to the window resize event doesn't fire on mount\n if (wheelRadius === 0) {\n resizeHandler();\n }\n }, [wheelRadius, resizeHandler]);\n\n useResizeObserver({\n ref: containerRef,\n onResize: resizeHandler\n });\n\n let state = useColorWheelState(props);\n\n let {trackProps, inputProps, thumbProps} = useColorWheel({\n ...props,\n innerRadius: wheelRadius - wheelThickness,\n outerRadius: wheelRadius\n }, state, inputRef);\n\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n className={\n classNames(\n styles,\n 'spectrum-ColorWheel',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )\n }\n ref={containerRef}\n style={{\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n 'width': size,\n 'height': size\n }}>\n <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n containerRef={containerRef}\n className={classNames(styles, 'spectrum-ColorWheel-handle')}\n {...thumbProps}>\n <input {...focusProps} className={classNames(styles, 'spectrum-ColorWheel-slider')} {...inputProps} ref={inputRef} />\n </ColorThumb>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"ColorWheel.module.js.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AALA,4CAA0D,CAAC,4CAA4C,CAAC;AACxG,4CAA+B,CAAC,kBAAkB,EAAE,
|
|
1
|
+
{"mappings":";;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AALA,4CAA0D,CAAC,4CAA4C,CAAC;AACxG,4CAA+B,CAAC,kBAAkB,EAAE,2CAAyD;AAC7G,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA+B,CAAC,kBAAkB,EAAE,2CAAyD;AAC7G,4CAAyC,CAAC,2BAA2B,CAAC;AACtE,4CAA+C,CAAC,iCAAiC,CAAC","sources":["packages/@adobe/spectrum-css-temp/components/colorhandle/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"colorhandle_vars_css.main.js.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AALA,4CAA0D,CAAC,4CAA4C,CAAC;AACxG,4CAA+B,CAAC,kBAAkB,EAAE,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AALA,4CAA0D,CAAC,4CAA4C,CAAC;AACxG,4CAA+B,CAAC,kBAAkB,EAAE,2CAAyD;AAC7G,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA+B,CAAC,kBAAkB,EAAE,2CAAyD;AAC7G,4CAAyC,CAAC,2BAA2B,CAAC;AACtE,4CAA+C,CAAC,iCAAiC,CAAC","sources":["packages/@adobe/spectrum-css-temp/components/colorhandle/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"colorhandle_vars_css.module.js.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAdA,0CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA0B,CAAC,YAAY,CAAC;AACxC,4CAAsD,CAAC,wCAAwC,CAAC;AAChG,4CAAyC,CAAC,2BAA2B,CAAC;AACtE,4CAAmD,CAAC,qCAAqC,CAAC;AAC1F,4CAA+D,CAAC,iDAAiD,CAAC;AAClH,4CAA6D,CAAC,+CAA+C,CAAC;AAC9G,4CAAwD,CAAC,0CAA0C,CAAC;AACpG,4CAAgD,CAAC,kCAAkC,CAAC;AACpF,4CAAwD,CAAC,0CAA0C,CAAC;AACpG,2CAAgD,CAAC,mCAAmC,EAAE,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAdA,0CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA0B,CAAC,YAAY,CAAC;AACxC,4CAAsD,CAAC,wCAAwC,CAAC;AAChG,4CAAyC,CAAC,2BAA2B,CAAC;AACtE,4CAAmD,CAAC,qCAAqC,CAAC;AAC1F,4CAA+D,CAAC,iDAAiD,CAAC;AAClH,4CAA6D,CAAC,+CAA+C,CAAC;AAC9G,4CAAwD,CAAC,0CAA0C,CAAC;AACpG,4CAAgD,CAAC,kCAAkC,CAAC;AACpF,4CAAwD,CAAC,0CAA0C,CAAC;AACpG,2CAAgD,CAAC,mCAAmC,EAAE,2CAAqD;AAC3I,4CAAoD,CAAC,sCAAsC,CAAC;AAC5F,4CAA0B,CAAC,YAAY,CAAC","sources":["packages/@adobe/spectrum-css-temp/components/colorslider/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"colorslider_vars_css.main.js.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAdA,0CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA0B,CAAC,YAAY,CAAC;AACxC,4CAAsD,CAAC,wCAAwC,CAAC;AAChG,4CAAyC,CAAC,2BAA2B,CAAC;AACtE,4CAAmD,CAAC,qCAAqC,CAAC;AAC1F,4CAA+D,CAAC,iDAAiD,CAAC;AAClH,4CAA6D,CAAC,+CAA+C,CAAC;AAC9G,4CAAwD,CAAC,0CAA0C,CAAC;AACpG,4CAAgD,CAAC,kCAAkC,CAAC;AACpF,4CAAwD,CAAC,0CAA0C,CAAC;AACpG,2CAAgD,CAAC,mCAAmC,EAAE,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAdA,0CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA0B,CAAC,YAAY,CAAC;AACxC,4CAAsD,CAAC,wCAAwC,CAAC;AAChG,4CAAyC,CAAC,2BAA2B,CAAC;AACtE,4CAAmD,CAAC,qCAAqC,CAAC;AAC1F,4CAA+D,CAAC,iDAAiD,CAAC;AAClH,4CAA6D,CAAC,+CAA+C,CAAC;AAC9G,4CAAwD,CAAC,0CAA0C,CAAC;AACpG,4CAAgD,CAAC,kCAAkC,CAAC;AACpF,4CAAwD,CAAC,0CAA0C,CAAC;AACpG,2CAAgD,CAAC,mCAAmC,EAAE,2CAAqD;AAC3I,4CAAoD,CAAC,sCAAsC,CAAC;AAC5F,4CAA0B,CAAC,YAAY,CAAC","sources":["packages/@adobe/spectrum-css-temp/components/colorslider/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"colorslider_vars_css.module.js.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AARA,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAsD,CAAC,wCAAwC,CAAC;AAChG,4CAAwC,CAAC,0BAA0B,CAAC;AACpE,4CAAiD,CAAC,mCAAmC,CAAC;AACtF,4CAA+C,CAAC,iCAAiC,CAAC;AAClF,2CAAgD,CAAC,kCAAkC,CAAC;AACpF,2CAA+C,CAAC,kCAAkC,EAAE,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AARA,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAsD,CAAC,wCAAwC,CAAC;AAChG,4CAAwC,CAAC,0BAA0B,CAAC;AACpE,4CAAiD,CAAC,mCAAmC,CAAC;AACtF,4CAA+C,CAAC,iCAAiC,CAAC;AAClF,2CAAgD,CAAC,kCAAkC,CAAC;AACpF,2CAA+C,CAAC,kCAAkC,EAAE,2CAAqD","sources":["packages/@adobe/spectrum-css-temp/components/colorwheel/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"colorwheel_vars_css.main.js.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AARA,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAsD,CAAC,wCAAwC,CAAC;AAChG,4CAAwC,CAAC,0BAA0B,CAAC;AACpE,4CAAiD,CAAC,mCAAmC,CAAC;AACtF,4CAA+C,CAAC,iCAAiC,CAAC;AAClF,2CAAgD,CAAC,kCAAkC,CAAC;AACpF,2CAA+C,CAAC,kCAAkC,EAAE,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AARA,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAsD,CAAC,wCAAwC,CAAC;AAChG,4CAAwC,CAAC,0BAA0B,CAAC;AACpE,4CAAiD,CAAC,mCAAmC,CAAC;AACtF,4CAA+C,CAAC,iCAAiC,CAAC;AAClF,2CAAgD,CAAC,kCAAkC,CAAC;AACpF,2CAA+C,CAAC,kCAAkC,EAAE,2CAAqD","sources":["packages/@adobe/spectrum-css-temp/components/colorwheel/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"colorwheel_vars_css.module.js.map"}
|
package/dist/types.d.ts
CHANGED
|
@@ -7,17 +7,17 @@ import { Color } from "react-aria-components";
|
|
|
7
7
|
/**
|
|
8
8
|
* ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
|
|
9
9
|
*/
|
|
10
|
-
export
|
|
10
|
+
export const ColorArea: (props: SpectrumColorAreaProps & {
|
|
11
11
|
ref?: FocusableRef<HTMLDivElement>;
|
|
12
12
|
}) => ReactElement;
|
|
13
13
|
/**
|
|
14
14
|
* ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
|
|
15
15
|
*/
|
|
16
|
-
export
|
|
16
|
+
export const ColorWheel: React.ForwardRefExoticComponent<SpectrumColorWheelProps & React.RefAttributes<FocusableRefValue<HTMLDivElement, HTMLDivElement>>>;
|
|
17
17
|
/**
|
|
18
18
|
* ColorSliders allow users to adjust an individual channel of a color value.
|
|
19
19
|
*/
|
|
20
|
-
export
|
|
20
|
+
export const ColorSlider: React.ForwardRefExoticComponent<SpectrumColorSliderProps & React.RefAttributes<FocusableRefValue<HTMLDivElement, HTMLDivElement>>>;
|
|
21
21
|
/**
|
|
22
22
|
* A color field allows users to edit a hex color or individual color channel value.
|
|
23
23
|
*/
|
|
@@ -37,7 +37,7 @@ export interface SpectrumColorSwatchProps extends AriaColorSwatchProps, StylePro
|
|
|
37
37
|
/**
|
|
38
38
|
* A ColorSwatch displays a preview of a selected color.
|
|
39
39
|
*/
|
|
40
|
-
export
|
|
40
|
+
export const ColorSwatch: React.ForwardRefExoticComponent<SpectrumColorSwatchProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
|
|
41
41
|
export interface SpectrumColorPickerProps extends ValueBase<string | Color, Color>, AriaLabelingProps {
|
|
42
42
|
/** A visual label for the color picker. */
|
|
43
43
|
label?: ReactNode;
|
|
@@ -57,7 +57,7 @@ export interface SpectrumColorPickerProps extends ValueBase<string | Color, Colo
|
|
|
57
57
|
/**
|
|
58
58
|
* A ColorPicker combines a swatch with a customizable popover for editing a color.
|
|
59
59
|
*/
|
|
60
|
-
export
|
|
60
|
+
export const ColorPicker: React.ForwardRefExoticComponent<SpectrumColorPickerProps & React.RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
|
|
61
61
|
export interface SpectrumColorEditorProps {
|
|
62
62
|
/** Whether to hide the alpha channel color slider and color field. */
|
|
63
63
|
hideAlphaChannel?: boolean;
|
|
@@ -65,7 +65,7 @@ export interface SpectrumColorEditorProps {
|
|
|
65
65
|
/**
|
|
66
66
|
* ColorEditor provides a default UI for editing colors within a ColorPicker.
|
|
67
67
|
*/
|
|
68
|
-
export
|
|
68
|
+
export const ColorEditor: React.ForwardRefExoticComponent<SpectrumColorEditorProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
|
|
69
69
|
export interface SpectrumColorSwatchPickerProps extends ValueBase<string | _Color1, _Color1>, StyleProps {
|
|
70
70
|
/** The ColorSwatches within the ColorSwatchPicker. */
|
|
71
71
|
children: ReactNode;
|
|
@@ -88,7 +88,7 @@ export interface SpectrumColorSwatchPickerProps extends ValueBase<string | _Colo
|
|
|
88
88
|
/**
|
|
89
89
|
* A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
|
|
90
90
|
*/
|
|
91
|
-
export
|
|
91
|
+
export const ColorSwatchPicker: React.ForwardRefExoticComponent<SpectrumColorSwatchPickerProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
|
|
92
92
|
export { parseColor, getColorChannels } from '@react-stately/color';
|
|
93
93
|
export type { SpectrumColorAreaProps, SpectrumColorFieldProps, SpectrumColorSliderProps, SpectrumColorWheelProps } from '@react-types/color';
|
|
94
94
|
export type { Color, ColorSpace, ColorFormat } from '@react-types/color';
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;
|
|
1
|
+
{"mappings":";;;;;;ACyBA;;GAEG;AACH,OAAO,MAAM,WA0DP,CAAC,KAAK,EAAE,sBAAsB,GAAG;IAAC,GAAG,CAAC,EAAE,aAAa,cAAc,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;AC3D7F;;GAEG;AACH,OAAO,MAAM,6IA+EX,CAAC;ACnFH;;GAEG;AACH,OAAO,MAAM,+IA+GX,CAAC;ACnHH;;GAEG;AACH,OAAO,MAAM,0HAaX,CAAC;ACrBH,yCAA0C,SAAQ,oBAAoB,EAAE,UAAU;IAChF;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;CACvC;AAQD;;GAEG;AACH,OAAO,MAAM,yHAwDX,CAAC;AC5EH,yCAA0C,SAAQ,UAAU,MAAM,GAAG,KAAK,EAAE,KAAK,CAAC,EAAE,iBAAiB;IACnG,2CAA2C;IAC3C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;CACvC;AAED;;GAEG;AACH,OAAO,MAAM,qJA6EX,CAAC;ACzGH;IACE,sEAAsE;IACtE,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED;;GAEG;AACH,OAAO,MAAM,yHAqCX,CAAC;ACvCH,+CAAgD,SAAQ,UAAU,MAAM,GAAG,OAAK,EAAE,OAAK,CAAC,EAAE,UAAU;IAClG,sDAAsD;IACtD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAC7C;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAA;CACvC;AAED;;GAEG;AACH,OAAO,MAAM,qIA+BX,CAAC;ACrDH,OAAO,EAAC,UAAU,EAAE,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AAClE,YAAY,EAAC,sBAAsB,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,EAAC,MAAM,oBAAoB,CAAC;AAK3I,YAAY,EAAC,KAAK,EAAE,UAAU,EAAE,WAAW,EAAC,MAAM,oBAAoB,CAAC","sources":["packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorThumb.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorArea.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorWheel.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorSlider.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorField.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorSwatch.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorPicker.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorEditor.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorSwatchPicker.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/index.ts","packages/@react-spectrum/color/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\nexport {ColorArea} from './ColorArea';\nexport {ColorWheel} from './ColorWheel';\nexport {ColorSlider} from './ColorSlider';\nexport {ColorField} from './ColorField';\nexport {ColorSwatch} from './ColorSwatch';\nexport {ColorPicker} from './ColorPicker';\nexport {ColorEditor} from './ColorEditor';\nexport {ColorSwatchPicker} from './ColorSwatchPicker';\nexport {parseColor, getColorChannels} from '@react-stately/color';\nexport type {SpectrumColorAreaProps, SpectrumColorFieldProps, SpectrumColorSliderProps, SpectrumColorWheelProps} from '@react-types/color';\nexport type {SpectrumColorSwatchProps} from './ColorSwatch';\nexport type {SpectrumColorPickerProps} from './ColorPicker';\nexport type {SpectrumColorEditorProps} from './ColorEditor';\nexport type {SpectrumColorSwatchPickerProps} from './ColorSwatchPicker';\nexport type {Color, ColorSpace, ColorFormat} from '@react-types/color';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
|
@@ -21,13 +21,13 @@
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
.uf4eyW_spectrum-ColorSlider {
|
|
24
|
+
width: 100%;
|
|
24
25
|
height: var(--spectrum-colorslider-height, var(--spectrum-global-dimension-size-300));
|
|
25
26
|
border-radius: var(--spectrum-colorslider-border-radius, var(--spectrum-alias-border-radius-regular));
|
|
26
27
|
-webkit-user-select: none;
|
|
27
28
|
user-select: none;
|
|
28
29
|
touch-action: none;
|
|
29
30
|
cursor: default;
|
|
30
|
-
width: 100%;
|
|
31
31
|
display: block;
|
|
32
32
|
position: relative;
|
|
33
33
|
}
|
|
@@ -117,4 +117,4 @@
|
|
|
117
117
|
--spectrum-colorarea-border-color: ButtonText;
|
|
118
118
|
}
|
|
119
119
|
}
|
|
120
|
-
/*# sourceMappingURL=vars.
|
|
120
|
+
/*# sourceMappingURL=vars.a54898d8.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAYA;;;;;;;;;;;;AAYA;;;;AAIA;;;;;;AAMA;;;;;;;;;;;;AAaE;;;;AAKA;;;;;;;;;;AAiBA;;;;AAIA;;;;AAKF;;;;;;AAME;;;;;AAMF;;;;;AAIE;;;;;;AAeF;;;;;;;AAOA;;;;;;AAMA;;;;;AAKA;;;;;AAIE;;;;AAIA;;;;;AAMF;EACE","sources":["packages/@adobe/spectrum-css-temp/components/colorslider/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.
|
|
1
|
+
{"mappings":"AAYA;;;;;;;;;;;;AAYA;;;;AAIA;;;;;;AAMA;;;;;;;;;;;;AAaE;;;;AAKA;;;;;;;;;;AAiBA;;;;AAIA;;;;AAKF;;;;;;AAME;;;;;AAMF;;;;;AAIE;;;;;;AAeF;;;;;;;AAOA;;;;;;AAMA;;;;;AAKA;;;;;AAIE;;;;AAIA;;;;;AAMF;EACE","sources":["packages/@adobe/spectrum-css-temp/components/colorslider/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.a54898d8.css.map"}
|