@react-spectrum/color 3.0.0-nightly.4624 → 3.0.0-nightly.4629
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 +5 -5
- package/dist/ColorArea.mjs +5 -5
- package/dist/ColorArea.module.js +5 -5
- package/dist/ColorEditor.main.js +21 -21
- package/dist/ColorEditor.mjs +21 -21
- package/dist/ColorEditor.module.js +21 -21
- package/dist/ColorField.main.js +4 -4
- package/dist/ColorField.mjs +4 -4
- package/dist/ColorField.module.js +4 -4
- package/dist/ColorPicker.main.js +46 -46
- package/dist/ColorPicker.mjs +46 -46
- package/dist/ColorPicker.module.js +46 -46
- package/dist/ColorSlider.main.js +15 -15
- package/dist/ColorSlider.mjs +15 -15
- package/dist/ColorSlider.module.js +15 -15
- package/dist/ColorSwatch.main.js +30 -30
- package/dist/ColorSwatch.mjs +30 -30
- package/dist/ColorSwatch.module.js +30 -30
- package/dist/ColorSwatchPicker.main.js +40 -40
- package/dist/ColorSwatchPicker.mjs +40 -40
- package/dist/ColorSwatchPicker.module.js +40 -40
- package/dist/ColorThumb.main.js +20 -20
- package/dist/ColorThumb.mjs +20 -20
- package/dist/ColorThumb.module.js +20 -20
- package/dist/ColorWheel.main.js +8 -8
- package/dist/ColorWheel.mjs +8 -8
- package/dist/ColorWheel.module.js +8 -8
- package/package.json +22 -22
package/dist/ColorSwatch.mjs
CHANGED
|
@@ -25,7 +25,7 @@ function $d68786ae409fa722$var$ColorSwatch(props, ref) {
|
|
|
25
25
|
let { colorSwatchProps: colorSwatchProps, color: color } = (0, $5Pjc1$useColorSwatch)(props);
|
|
26
26
|
let { styleProps: styleProps } = (0, $5Pjc1$useStyleProps)(props);
|
|
27
27
|
let ctx = (0, $5Pjc1$useContext)($d68786ae409fa722$export$8529d7908a78c058);
|
|
28
|
-
let { size: size = (ctx === null || ctx === void 0 ? void 0 : ctx.size) ||
|
|
28
|
+
let { size: size = (ctx === null || ctx === void 0 ? void 0 : ctx.size) || 'M', rounding: rounding = (ctx === null || ctx === void 0 ? void 0 : ctx.rounding) || 'default' } = props;
|
|
29
29
|
let swatch = /*#__PURE__*/ (0, $5Pjc1$react).createElement("div", {
|
|
30
30
|
...colorSwatchProps,
|
|
31
31
|
...styleProps,
|
|
@@ -33,38 +33,38 @@ function $d68786ae409fa722$var$ColorSwatch(props, ref) {
|
|
|
33
33
|
style: {
|
|
34
34
|
...styleProps.style,
|
|
35
35
|
// TODO: should there be a distinction between transparent and no value (e.g. null)?
|
|
36
|
-
background: color.getChannelValue(
|
|
36
|
+
background: color.getChannelValue('alpha') > 0 ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px` : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--spectrum-red-900) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'
|
|
37
37
|
},
|
|
38
38
|
className: function anonymous(props) {
|
|
39
39
|
let rules = "";
|
|
40
|
-
if (props.size === "L") rules +=
|
|
41
|
-
else if (props.size === "M") rules +=
|
|
42
|
-
else if (props.size === "S") rules +=
|
|
43
|
-
else if (props.size === "XS") rules +=
|
|
44
|
-
if (props.size === "L") rules +=
|
|
45
|
-
else if (props.size === "M") rules +=
|
|
46
|
-
else if (props.size === "S") rules +=
|
|
47
|
-
else if (props.size === "XS") rules +=
|
|
48
|
-
if (props.rounding === "full") rules +=
|
|
49
|
-
else if (props.rounding === "none") rules +=
|
|
50
|
-
else if (props.rounding === "default") rules +=
|
|
51
|
-
if (props.rounding === "full") rules +=
|
|
52
|
-
else if (props.rounding === "none") rules +=
|
|
53
|
-
else if (props.rounding === "default") rules +=
|
|
54
|
-
if (props.rounding === "full") rules +=
|
|
55
|
-
else if (props.rounding === "none") rules +=
|
|
56
|
-
else if (props.rounding === "default") rules +=
|
|
57
|
-
if (props.rounding === "full") rules +=
|
|
58
|
-
else if (props.rounding === "none") rules +=
|
|
59
|
-
else if (props.rounding === "default") rules +=
|
|
60
|
-
rules +=
|
|
61
|
-
rules +=
|
|
62
|
-
rules +=
|
|
63
|
-
rules +=
|
|
64
|
-
rules +=
|
|
65
|
-
rules +=
|
|
66
|
-
rules +=
|
|
67
|
-
rules +=
|
|
40
|
+
if (props.size === "L") rules += ' ok';
|
|
41
|
+
else if (props.size === "M") rules += ' oi';
|
|
42
|
+
else if (props.size === "S") rules += ' og';
|
|
43
|
+
else if (props.size === "XS") rules += ' oe';
|
|
44
|
+
if (props.size === "L") rules += ' nk';
|
|
45
|
+
else if (props.size === "M") rules += ' ni';
|
|
46
|
+
else if (props.size === "S") rules += ' ng';
|
|
47
|
+
else if (props.size === "XS") rules += ' ne';
|
|
48
|
+
if (props.rounding === "full") rules += ' _pf';
|
|
49
|
+
else if (props.rounding === "none") rules += ' _pa';
|
|
50
|
+
else if (props.rounding === "default") rules += ' _pc';
|
|
51
|
+
if (props.rounding === "full") rules += ' _qf';
|
|
52
|
+
else if (props.rounding === "none") rules += ' _qa';
|
|
53
|
+
else if (props.rounding === "default") rules += ' _qc';
|
|
54
|
+
if (props.rounding === "full") rules += ' _rf';
|
|
55
|
+
else if (props.rounding === "none") rules += ' _ra';
|
|
56
|
+
else if (props.rounding === "default") rules += ' _rc';
|
|
57
|
+
if (props.rounding === "full") rules += ' _sf';
|
|
58
|
+
else if (props.rounding === "none") rules += ' _sa';
|
|
59
|
+
else if (props.rounding === "default") rules += ' _sc';
|
|
60
|
+
rules += ' c-1n5whoe';
|
|
61
|
+
rules += ' wb';
|
|
62
|
+
rules += ' xb';
|
|
63
|
+
rules += ' ub';
|
|
64
|
+
rules += ' vb';
|
|
65
|
+
rules += ' Aa';
|
|
66
|
+
rules += ' __ka';
|
|
67
|
+
rules += ' _tb';
|
|
68
68
|
return rules;
|
|
69
69
|
}({
|
|
70
70
|
size: size,
|
|
@@ -25,7 +25,7 @@ function $d68786ae409fa722$var$ColorSwatch(props, ref) {
|
|
|
25
25
|
let { colorSwatchProps: colorSwatchProps, color: color } = (0, $5Pjc1$useColorSwatch)(props);
|
|
26
26
|
let { styleProps: styleProps } = (0, $5Pjc1$useStyleProps)(props);
|
|
27
27
|
let ctx = (0, $5Pjc1$useContext)($d68786ae409fa722$export$8529d7908a78c058);
|
|
28
|
-
let { size: size = (ctx === null || ctx === void 0 ? void 0 : ctx.size) ||
|
|
28
|
+
let { size: size = (ctx === null || ctx === void 0 ? void 0 : ctx.size) || 'M', rounding: rounding = (ctx === null || ctx === void 0 ? void 0 : ctx.rounding) || 'default' } = props;
|
|
29
29
|
let swatch = /*#__PURE__*/ (0, $5Pjc1$react).createElement("div", {
|
|
30
30
|
...colorSwatchProps,
|
|
31
31
|
...styleProps,
|
|
@@ -33,38 +33,38 @@ function $d68786ae409fa722$var$ColorSwatch(props, ref) {
|
|
|
33
33
|
style: {
|
|
34
34
|
...styleProps.style,
|
|
35
35
|
// TODO: should there be a distinction between transparent and no value (e.g. null)?
|
|
36
|
-
background: color.getChannelValue(
|
|
36
|
+
background: color.getChannelValue('alpha') > 0 ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px` : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--spectrum-red-900) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'
|
|
37
37
|
},
|
|
38
38
|
className: function anonymous(props) {
|
|
39
39
|
let rules = "";
|
|
40
|
-
if (props.size === "L") rules +=
|
|
41
|
-
else if (props.size === "M") rules +=
|
|
42
|
-
else if (props.size === "S") rules +=
|
|
43
|
-
else if (props.size === "XS") rules +=
|
|
44
|
-
if (props.size === "L") rules +=
|
|
45
|
-
else if (props.size === "M") rules +=
|
|
46
|
-
else if (props.size === "S") rules +=
|
|
47
|
-
else if (props.size === "XS") rules +=
|
|
48
|
-
if (props.rounding === "full") rules +=
|
|
49
|
-
else if (props.rounding === "none") rules +=
|
|
50
|
-
else if (props.rounding === "default") rules +=
|
|
51
|
-
if (props.rounding === "full") rules +=
|
|
52
|
-
else if (props.rounding === "none") rules +=
|
|
53
|
-
else if (props.rounding === "default") rules +=
|
|
54
|
-
if (props.rounding === "full") rules +=
|
|
55
|
-
else if (props.rounding === "none") rules +=
|
|
56
|
-
else if (props.rounding === "default") rules +=
|
|
57
|
-
if (props.rounding === "full") rules +=
|
|
58
|
-
else if (props.rounding === "none") rules +=
|
|
59
|
-
else if (props.rounding === "default") rules +=
|
|
60
|
-
rules +=
|
|
61
|
-
rules +=
|
|
62
|
-
rules +=
|
|
63
|
-
rules +=
|
|
64
|
-
rules +=
|
|
65
|
-
rules +=
|
|
66
|
-
rules +=
|
|
67
|
-
rules +=
|
|
40
|
+
if (props.size === "L") rules += ' ok';
|
|
41
|
+
else if (props.size === "M") rules += ' oi';
|
|
42
|
+
else if (props.size === "S") rules += ' og';
|
|
43
|
+
else if (props.size === "XS") rules += ' oe';
|
|
44
|
+
if (props.size === "L") rules += ' nk';
|
|
45
|
+
else if (props.size === "M") rules += ' ni';
|
|
46
|
+
else if (props.size === "S") rules += ' ng';
|
|
47
|
+
else if (props.size === "XS") rules += ' ne';
|
|
48
|
+
if (props.rounding === "full") rules += ' _pf';
|
|
49
|
+
else if (props.rounding === "none") rules += ' _pa';
|
|
50
|
+
else if (props.rounding === "default") rules += ' _pc';
|
|
51
|
+
if (props.rounding === "full") rules += ' _qf';
|
|
52
|
+
else if (props.rounding === "none") rules += ' _qa';
|
|
53
|
+
else if (props.rounding === "default") rules += ' _qc';
|
|
54
|
+
if (props.rounding === "full") rules += ' _rf';
|
|
55
|
+
else if (props.rounding === "none") rules += ' _ra';
|
|
56
|
+
else if (props.rounding === "default") rules += ' _rc';
|
|
57
|
+
if (props.rounding === "full") rules += ' _sf';
|
|
58
|
+
else if (props.rounding === "none") rules += ' _sa';
|
|
59
|
+
else if (props.rounding === "default") rules += ' _sc';
|
|
60
|
+
rules += ' c-1n5whoe';
|
|
61
|
+
rules += ' wb';
|
|
62
|
+
rules += ' xb';
|
|
63
|
+
rules += ' ub';
|
|
64
|
+
rules += ' vb';
|
|
65
|
+
rules += ' Aa';
|
|
66
|
+
rules += ' __ka';
|
|
67
|
+
rules += ' _tb';
|
|
68
68
|
return rules;
|
|
69
69
|
}({
|
|
70
70
|
size: size,
|
|
@@ -29,7 +29,7 @@ $parcel$export(module.exports, "ColorSwatchPicker", () => $ba9a184bcae9b225$expo
|
|
|
29
29
|
|
|
30
30
|
|
|
31
31
|
function $ba9a184bcae9b225$var$ColorSwatchPicker(props, ref) {
|
|
32
|
-
let { density: density =
|
|
32
|
+
let { density: density = 'regular', size: size = 'M', rounding: rounding = 'none', ...otherProps } = props;
|
|
33
33
|
let { styleProps: styleProps } = (0, $iY2T3$reactspectrumutils.useStyleProps)(props);
|
|
34
34
|
let domRef = (0, $iY2T3$reactspectrumutils.useDOMRef)(ref);
|
|
35
35
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($iY2T3$react))).createElement((0, $iY2T3$reactariacomponents.ColorSwatchPicker), {
|
|
@@ -38,14 +38,14 @@ function $ba9a184bcae9b225$var$ColorSwatchPicker(props, ref) {
|
|
|
38
38
|
ref: domRef,
|
|
39
39
|
className: styleProps.className + function anonymous(props) {
|
|
40
40
|
let rules = "";
|
|
41
|
-
rules +=
|
|
42
|
-
rules +=
|
|
43
|
-
if (props.density === "spacious") rules +=
|
|
44
|
-
else if (props.density === "regular") rules +=
|
|
45
|
-
else if (props.density === "compact") rules +=
|
|
46
|
-
if (props.density === "spacious") rules +=
|
|
47
|
-
else if (props.density === "regular") rules +=
|
|
48
|
-
else if (props.density === "compact") rules +=
|
|
41
|
+
rules += ' _Sd';
|
|
42
|
+
rules += ' _0a';
|
|
43
|
+
if (props.density === "spacious") rules += ' lc';
|
|
44
|
+
else if (props.density === "regular") rules += ' lb';
|
|
45
|
+
else if (props.density === "compact") rules += ' lF';
|
|
46
|
+
if (props.density === "spacious") rules += ' mc';
|
|
47
|
+
else if (props.density === "regular") rules += ' mb';
|
|
48
|
+
else if (props.density === "compact") rules += ' mF';
|
|
49
49
|
return rules;
|
|
50
50
|
}({
|
|
51
51
|
density: density
|
|
@@ -66,25 +66,25 @@ function $ba9a184bcae9b225$var$useWrapper(swatch, color, rounding) {
|
|
|
66
66
|
color: color,
|
|
67
67
|
className: (renderProps)=>(function anonymous(props) {
|
|
68
68
|
let rules = "";
|
|
69
|
-
if (props.isFocusVisible) rules +=
|
|
70
|
-
else rules +=
|
|
71
|
-
rules +=
|
|
72
|
-
rules +=
|
|
73
|
-
rules +=
|
|
74
|
-
rules +=
|
|
75
|
-
rules +=
|
|
76
|
-
if (props.rounding === "full") rules +=
|
|
77
|
-
else if (props.rounding === "default") rules +=
|
|
78
|
-
else if (props.rounding === "none") rules +=
|
|
79
|
-
if (props.rounding === "full") rules +=
|
|
80
|
-
else if (props.rounding === "default") rules +=
|
|
81
|
-
else if (props.rounding === "none") rules +=
|
|
82
|
-
if (props.rounding === "full") rules +=
|
|
83
|
-
else if (props.rounding === "default") rules +=
|
|
84
|
-
else if (props.rounding === "none") rules +=
|
|
85
|
-
if (props.rounding === "full") rules +=
|
|
86
|
-
else if (props.rounding === "default") rules +=
|
|
87
|
-
else if (props.rounding === "none") rules +=
|
|
69
|
+
if (props.isFocusVisible) rules += ' _Eb';
|
|
70
|
+
else rules += ' _Ea';
|
|
71
|
+
rules += ' da___D';
|
|
72
|
+
rules += ' d___I';
|
|
73
|
+
rules += ' _Gc';
|
|
74
|
+
rules += ' _Fc';
|
|
75
|
+
rules += ' Xc';
|
|
76
|
+
if (props.rounding === "full") rules += ' _pf';
|
|
77
|
+
else if (props.rounding === "default") rules += ' _pc';
|
|
78
|
+
else if (props.rounding === "none") rules += ' _pa';
|
|
79
|
+
if (props.rounding === "full") rules += ' _qf';
|
|
80
|
+
else if (props.rounding === "default") rules += ' _qc';
|
|
81
|
+
else if (props.rounding === "none") rules += ' _qa';
|
|
82
|
+
if (props.rounding === "full") rules += ' _rf';
|
|
83
|
+
else if (props.rounding === "default") rules += ' _rc';
|
|
84
|
+
else if (props.rounding === "none") rules += ' _ra';
|
|
85
|
+
if (props.rounding === "full") rules += ' _sf';
|
|
86
|
+
else if (props.rounding === "default") rules += ' _sc';
|
|
87
|
+
else if (props.rounding === "none") rules += ' _sa';
|
|
88
88
|
return rules;
|
|
89
89
|
})({
|
|
90
90
|
...renderProps,
|
|
@@ -94,18 +94,18 @@ function $ba9a184bcae9b225$var$useWrapper(swatch, color, rounding) {
|
|
|
94
94
|
"aria-hidden": true,
|
|
95
95
|
className: function anonymous(props) {
|
|
96
96
|
let rules = "";
|
|
97
|
-
rules +=
|
|
98
|
-
rules +=
|
|
99
|
-
rules +=
|
|
100
|
-
rules +=
|
|
101
|
-
rules +=
|
|
102
|
-
rules +=
|
|
103
|
-
rules +=
|
|
104
|
-
rules +=
|
|
105
|
-
rules +=
|
|
106
|
-
rules +=
|
|
107
|
-
rules +=
|
|
108
|
-
rules +=
|
|
97
|
+
rules += ' Xa';
|
|
98
|
+
rules += ' __ya';
|
|
99
|
+
rules += ' _0a';
|
|
100
|
+
rules += ' _2a';
|
|
101
|
+
rules += ' _1a';
|
|
102
|
+
rules += ' _3a';
|
|
103
|
+
rules += ' _o-1icpv9v';
|
|
104
|
+
rules += ' _tb';
|
|
105
|
+
rules += ' _p-17zqamw';
|
|
106
|
+
rules += ' _q-17zqamw';
|
|
107
|
+
rules += ' _r-17zqamw';
|
|
108
|
+
rules += ' _s-17zqamw';
|
|
109
109
|
return rules;
|
|
110
110
|
}()
|
|
111
111
|
})));
|
|
@@ -19,7 +19,7 @@ import {useStyleProps as $1TpDU$useStyleProps, useDOMRef as $1TpDU$useDOMRef} fr
|
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
function $4919bc07654f325c$var$ColorSwatchPicker(props, ref) {
|
|
22
|
-
let { density: density =
|
|
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);
|
|
25
25
|
return /*#__PURE__*/ (0, $1TpDU$react).createElement((0, $1TpDU$ColorSwatchPicker), {
|
|
@@ -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 += ' _Sd';
|
|
32
|
+
rules += ' _0a';
|
|
33
|
+
if (props.density === "spacious") rules += ' lc';
|
|
34
|
+
else if (props.density === "regular") rules += ' lb';
|
|
35
|
+
else if (props.density === "compact") rules += ' lF';
|
|
36
|
+
if (props.density === "spacious") rules += ' mc';
|
|
37
|
+
else if (props.density === "regular") rules += ' mb';
|
|
38
|
+
else if (props.density === "compact") rules += ' mF';
|
|
39
39
|
return rules;
|
|
40
40
|
}({
|
|
41
41
|
density: density
|
|
@@ -56,25 +56,25 @@ function $4919bc07654f325c$var$useWrapper(swatch, color, rounding) {
|
|
|
56
56
|
color: color,
|
|
57
57
|
className: (renderProps)=>(function anonymous(props) {
|
|
58
58
|
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 +=
|
|
59
|
+
if (props.isFocusVisible) rules += ' _Eb';
|
|
60
|
+
else rules += ' _Ea';
|
|
61
|
+
rules += ' da___D';
|
|
62
|
+
rules += ' d___I';
|
|
63
|
+
rules += ' _Gc';
|
|
64
|
+
rules += ' _Fc';
|
|
65
|
+
rules += ' Xc';
|
|
66
|
+
if (props.rounding === "full") rules += ' _pf';
|
|
67
|
+
else if (props.rounding === "default") rules += ' _pc';
|
|
68
|
+
else if (props.rounding === "none") rules += ' _pa';
|
|
69
|
+
if (props.rounding === "full") rules += ' _qf';
|
|
70
|
+
else if (props.rounding === "default") rules += ' _qc';
|
|
71
|
+
else if (props.rounding === "none") rules += ' _qa';
|
|
72
|
+
if (props.rounding === "full") rules += ' _rf';
|
|
73
|
+
else if (props.rounding === "default") rules += ' _rc';
|
|
74
|
+
else if (props.rounding === "none") rules += ' _ra';
|
|
75
|
+
if (props.rounding === "full") rules += ' _sf';
|
|
76
|
+
else if (props.rounding === "default") rules += ' _sc';
|
|
77
|
+
else if (props.rounding === "none") rules += ' _sa';
|
|
78
78
|
return rules;
|
|
79
79
|
})({
|
|
80
80
|
...renderProps,
|
|
@@ -84,18 +84,18 @@ function $4919bc07654f325c$var$useWrapper(swatch, color, rounding) {
|
|
|
84
84
|
"aria-hidden": true,
|
|
85
85
|
className: function anonymous(props) {
|
|
86
86
|
let rules = "";
|
|
87
|
-
rules +=
|
|
88
|
-
rules +=
|
|
89
|
-
rules +=
|
|
90
|
-
rules +=
|
|
91
|
-
rules +=
|
|
92
|
-
rules +=
|
|
93
|
-
rules +=
|
|
94
|
-
rules +=
|
|
95
|
-
rules +=
|
|
96
|
-
rules +=
|
|
97
|
-
rules +=
|
|
98
|
-
rules +=
|
|
87
|
+
rules += ' Xa';
|
|
88
|
+
rules += ' __ya';
|
|
89
|
+
rules += ' _0a';
|
|
90
|
+
rules += ' _2a';
|
|
91
|
+
rules += ' _1a';
|
|
92
|
+
rules += ' _3a';
|
|
93
|
+
rules += ' _o-1icpv9v';
|
|
94
|
+
rules += ' _tb';
|
|
95
|
+
rules += ' _p-17zqamw';
|
|
96
|
+
rules += ' _q-17zqamw';
|
|
97
|
+
rules += ' _r-17zqamw';
|
|
98
|
+
rules += ' _s-17zqamw';
|
|
99
99
|
return rules;
|
|
100
100
|
}()
|
|
101
101
|
})));
|
|
@@ -19,7 +19,7 @@ import {useStyleProps as $1TpDU$useStyleProps, useDOMRef as $1TpDU$useDOMRef} fr
|
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
function $4919bc07654f325c$var$ColorSwatchPicker(props, ref) {
|
|
22
|
-
let { density: density =
|
|
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);
|
|
25
25
|
return /*#__PURE__*/ (0, $1TpDU$react).createElement((0, $1TpDU$ColorSwatchPicker), {
|
|
@@ -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 += ' _Sd';
|
|
32
|
+
rules += ' _0a';
|
|
33
|
+
if (props.density === "spacious") rules += ' lc';
|
|
34
|
+
else if (props.density === "regular") rules += ' lb';
|
|
35
|
+
else if (props.density === "compact") rules += ' lF';
|
|
36
|
+
if (props.density === "spacious") rules += ' mc';
|
|
37
|
+
else if (props.density === "regular") rules += ' mb';
|
|
38
|
+
else if (props.density === "compact") rules += ' mF';
|
|
39
39
|
return rules;
|
|
40
40
|
}({
|
|
41
41
|
density: density
|
|
@@ -56,25 +56,25 @@ function $4919bc07654f325c$var$useWrapper(swatch, color, rounding) {
|
|
|
56
56
|
color: color,
|
|
57
57
|
className: (renderProps)=>(function anonymous(props) {
|
|
58
58
|
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 +=
|
|
59
|
+
if (props.isFocusVisible) rules += ' _Eb';
|
|
60
|
+
else rules += ' _Ea';
|
|
61
|
+
rules += ' da___D';
|
|
62
|
+
rules += ' d___I';
|
|
63
|
+
rules += ' _Gc';
|
|
64
|
+
rules += ' _Fc';
|
|
65
|
+
rules += ' Xc';
|
|
66
|
+
if (props.rounding === "full") rules += ' _pf';
|
|
67
|
+
else if (props.rounding === "default") rules += ' _pc';
|
|
68
|
+
else if (props.rounding === "none") rules += ' _pa';
|
|
69
|
+
if (props.rounding === "full") rules += ' _qf';
|
|
70
|
+
else if (props.rounding === "default") rules += ' _qc';
|
|
71
|
+
else if (props.rounding === "none") rules += ' _qa';
|
|
72
|
+
if (props.rounding === "full") rules += ' _rf';
|
|
73
|
+
else if (props.rounding === "default") rules += ' _rc';
|
|
74
|
+
else if (props.rounding === "none") rules += ' _ra';
|
|
75
|
+
if (props.rounding === "full") rules += ' _sf';
|
|
76
|
+
else if (props.rounding === "default") rules += ' _sc';
|
|
77
|
+
else if (props.rounding === "none") rules += ' _sa';
|
|
78
78
|
return rules;
|
|
79
79
|
})({
|
|
80
80
|
...renderProps,
|
|
@@ -84,18 +84,18 @@ function $4919bc07654f325c$var$useWrapper(swatch, color, rounding) {
|
|
|
84
84
|
"aria-hidden": true,
|
|
85
85
|
className: function anonymous(props) {
|
|
86
86
|
let rules = "";
|
|
87
|
-
rules +=
|
|
88
|
-
rules +=
|
|
89
|
-
rules +=
|
|
90
|
-
rules +=
|
|
91
|
-
rules +=
|
|
92
|
-
rules +=
|
|
93
|
-
rules +=
|
|
94
|
-
rules +=
|
|
95
|
-
rules +=
|
|
96
|
-
rules +=
|
|
97
|
-
rules +=
|
|
98
|
-
rules +=
|
|
87
|
+
rules += ' Xa';
|
|
88
|
+
rules += ' __ya';
|
|
89
|
+
rules += ' _0a';
|
|
90
|
+
rules += ' _2a';
|
|
91
|
+
rules += ' _1a';
|
|
92
|
+
rules += ' _3a';
|
|
93
|
+
rules += ' _o-1icpv9v';
|
|
94
|
+
rules += ' _tb';
|
|
95
|
+
rules += ' _p-17zqamw';
|
|
96
|
+
rules += ' _q-17zqamw';
|
|
97
|
+
rules += ' _r-17zqamw';
|
|
98
|
+
rules += ' _s-17zqamw';
|
|
99
99
|
return rules;
|
|
100
100
|
}()
|
|
101
101
|
})));
|
package/dist/ColorThumb.main.js
CHANGED
|
@@ -36,19 +36,19 @@ $parcel$export(module.exports, "ColorThumb", () => $2b9adc23f6c7cae1$export$a3cc
|
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
function $2b9adc23f6c7cae1$export$a3cc47cee1c1ccc(props) {
|
|
39
|
-
let { value: value, isDisabled: isDisabled, isDragging: isDragging, isFocused: isFocused, children: children, className: className =
|
|
40
|
-
let valueCSS = value.toString(
|
|
39
|
+
let { value: value, isDisabled: isDisabled, isDragging: isDragging, isFocused: isFocused, children: children, className: className = '', style: style, containerRef: containerRef, ...otherProps } = props;
|
|
40
|
+
let valueCSS = value.toString('css');
|
|
41
41
|
let loupeRef = (0, $bRwD9$react.useRef)(null);
|
|
42
42
|
let provider = (0, $bRwD9$reactspectrumprovider.useProvider)();
|
|
43
43
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("div", {
|
|
44
|
-
className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f61d632765728b2e$exports))),
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}) +
|
|
44
|
+
className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f61d632765728b2e$exports))), 'spectrum-ColorHandle', {
|
|
45
|
+
'is-focused': isFocused,
|
|
46
|
+
'is-disabled': isDisabled
|
|
47
|
+
}) + ' ' + className,
|
|
48
48
|
style: style,
|
|
49
49
|
...otherProps
|
|
50
50
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("div", {
|
|
51
|
-
className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f61d632765728b2e$exports))),
|
|
51
|
+
className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f61d632765728b2e$exports))), 'spectrum-ColorHandle-color'),
|
|
52
52
|
style: {
|
|
53
53
|
backgroundColor: valueCSS
|
|
54
54
|
}
|
|
@@ -85,17 +85,17 @@ function $2b9adc23f6c7cae1$var$ColorLoupe({ isOpen: isOpen, valueCSS: valueCSS,
|
|
|
85
85
|
containerRef
|
|
86
86
|
]);
|
|
87
87
|
// Compute the pixel position of the thumb.
|
|
88
|
-
let thumbTop = style.top ||
|
|
89
|
-
if (typeof thumbTop ===
|
|
90
|
-
let thumbLeft = style.left ||
|
|
91
|
-
if (typeof thumbLeft ===
|
|
88
|
+
let thumbTop = style.top || '50%';
|
|
89
|
+
if (typeof thumbTop === 'string' && thumbTop.endsWith('%')) thumbTop = parseFloat(style.top || '50%') / 100 * containerRect.height;
|
|
90
|
+
let thumbLeft = style.left || '50%';
|
|
91
|
+
if (typeof thumbLeft === 'string' && thumbLeft.endsWith('%')) thumbLeft = parseFloat(thumbLeft || '50%') / 100 * containerRect.width;
|
|
92
92
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("svg", {
|
|
93
|
-
className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))),
|
|
94
|
-
|
|
93
|
+
className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))), 'spectrum-ColorLoupe', {
|
|
94
|
+
'is-open': isOpen
|
|
95
95
|
}),
|
|
96
96
|
style: {
|
|
97
97
|
// Position relative to the viewport.
|
|
98
|
-
position:
|
|
98
|
+
position: 'fixed',
|
|
99
99
|
top: containerRect.top + thumbTop,
|
|
100
100
|
left: containerRect.left + thumbLeft
|
|
101
101
|
},
|
|
@@ -109,33 +109,33 @@ function $2b9adc23f6c7cae1$var$ColorLoupe({ isOpen: isOpen, valueCSS: valueCSS,
|
|
|
109
109
|
height: "16",
|
|
110
110
|
patternUnits: "userSpaceOnUse"
|
|
111
111
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("rect", {
|
|
112
|
-
className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))),
|
|
112
|
+
className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))), 'spectrum-ColorLoupe-inner-background'),
|
|
113
113
|
x: "0",
|
|
114
114
|
y: "0",
|
|
115
115
|
width: "16",
|
|
116
116
|
height: "16"
|
|
117
117
|
}), /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("rect", {
|
|
118
|
-
className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))),
|
|
118
|
+
className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))), 'spectrum-ColorLoupe-inner-checker'),
|
|
119
119
|
x: "0",
|
|
120
120
|
y: "0",
|
|
121
121
|
width: "8",
|
|
122
122
|
height: "8"
|
|
123
123
|
}), /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("rect", {
|
|
124
|
-
className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))),
|
|
124
|
+
className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))), 'spectrum-ColorLoupe-inner-checker'),
|
|
125
125
|
x: "8",
|
|
126
126
|
y: "8",
|
|
127
127
|
width: "8",
|
|
128
128
|
height: "8"
|
|
129
129
|
})), /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("path", {
|
|
130
|
-
className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))),
|
|
130
|
+
className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))), 'spectrum-ColorLoupe-inner'),
|
|
131
131
|
d: "M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z",
|
|
132
132
|
fill: `url(#${patternId})`
|
|
133
133
|
}), /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("path", {
|
|
134
|
-
className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))),
|
|
134
|
+
className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))), 'spectrum-ColorLoupe-inner'),
|
|
135
135
|
d: "M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z",
|
|
136
136
|
fill: valueCSS
|
|
137
137
|
}), /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("path", {
|
|
138
|
-
className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))),
|
|
138
|
+
className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))), 'spectrum-ColorLoupe-outer'),
|
|
139
139
|
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"
|
|
140
140
|
}));
|
|
141
141
|
}
|