@react-aria/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.
Files changed (22) hide show
  1. package/dist/useColorArea.main.js +70 -70
  2. package/dist/useColorArea.mjs +70 -70
  3. package/dist/useColorArea.module.js +70 -70
  4. package/dist/useColorAreaGradient.main.js +26 -26
  5. package/dist/useColorAreaGradient.mjs +26 -26
  6. package/dist/useColorAreaGradient.module.js +26 -26
  7. package/dist/useColorChannelField.main.js +1 -1
  8. package/dist/useColorChannelField.mjs +1 -1
  9. package/dist/useColorChannelField.module.js +1 -1
  10. package/dist/useColorField.main.js +12 -12
  11. package/dist/useColorField.mjs +12 -12
  12. package/dist/useColorField.module.js +12 -12
  13. package/dist/useColorSlider.main.js +28 -28
  14. package/dist/useColorSlider.mjs +28 -28
  15. package/dist/useColorSlider.module.js +28 -28
  16. package/dist/useColorSwatch.main.js +12 -12
  17. package/dist/useColorSwatch.mjs +12 -12
  18. package/dist/useColorSwatch.module.js +12 -12
  19. package/dist/useColorWheel.main.js +38 -38
  20. package/dist/useColorWheel.mjs +38 -38
  21. package/dist/useColorWheel.module.js +38 -38
  22. package/package.json +14 -14
package/dist/useColorAreaGradient.module.js CHANGED
@@ -21,27 +21,27 @@ const $40297c24c53588e6$var$hue = (color)=>[
21
21
  240,
22
22
  300,
23
23
  360
24
- ].map((hue)=>color.withChannelValue("hue", hue).toString("css")).join(", ");
25
- const $40297c24c53588e6$var$saturation = (color)=>`${color.withChannelValue("saturation", 0)}, transparent`;
24
+ ].map((hue)=>color.withChannelValue('hue', hue).toString('css')).join(', ');
25
+ const $40297c24c53588e6$var$saturation = (color)=>`${color.withChannelValue('saturation', 0)}, transparent`;
26
26
  const $40297c24c53588e6$var$hslChannels = {
27
27
  hue: $40297c24c53588e6$var$hue,
28
28
  saturation: $40297c24c53588e6$var$saturation,
29
- lightness: ()=>"black, transparent, white"
29
+ lightness: ()=>'black, transparent, white'
30
30
  };
31
31
  const $40297c24c53588e6$var$hsbChannels = {
32
32
  hue: $40297c24c53588e6$var$hue,
33
33
  saturation: $40297c24c53588e6$var$saturation,
34
- brightness: ()=>"black, transparent"
34
+ brightness: ()=>'black, transparent'
35
35
  };
36
36
  function $40297c24c53588e6$export$dd62420467d245ca({ direction: direction, state: state, zChannel: zChannel, xChannel: xChannel, yChannel: yChannel }) {
37
37
  let returnVal = (0, $hLqEt$useMemo)(()=>{
38
- let end = direction === "rtl" ? "left" : "right";
38
+ let end = direction === 'rtl' ? 'left' : 'right';
39
39
  let colorAreaStyles = {};
40
40
  let zValue = state.value.getChannelValue(zChannel);
41
41
  switch(state.value.getColorSpace()){
42
- case "rgb":
42
+ case 'rgb':
43
43
  {
44
- let rgb = (0, $hLqEt$parseColor)("rgb(0, 0, 0)");
44
+ let rgb = (0, $hLqEt$parseColor)('rgb(0, 0, 0)');
45
45
  colorAreaStyles = {
46
46
  background: [
47
47
  // The screen blend mode multiplies the inverse of each channel, e.g. 1 - (1 - a) * (1 - b).
@@ -50,55 +50,55 @@ function $40297c24c53588e6$export$dd62420467d245ca({ direction: direction, state
50
50
  `linear-gradient(to ${end}, ${rgb.withChannelValue(xChannel, 0)}, ${rgb.withChannelValue(xChannel, 255)})`,
51
51
  `linear-gradient(to top, ${rgb.withChannelValue(yChannel, 0)}, ${rgb.withChannelValue(yChannel, 255)})`,
52
52
  rgb.withChannelValue(zChannel, zValue)
53
- ].join(","),
54
- backgroundBlendMode: "screen"
53
+ ].join(','),
54
+ backgroundBlendMode: 'screen'
55
55
  };
56
56
  break;
57
57
  }
58
- case "hsl":
58
+ case 'hsl':
59
59
  {
60
60
  let channels = state.value.getColorChannels();
61
- let value = (0, $hLqEt$parseColor)("hsl(0, 100%, 50%)").withChannelValue(zChannel, zValue);
62
- let bg = channels.filter((c)=>c !== zChannel).map((c)=>`linear-gradient(to ${c === xChannel ? end : "top"}, ${$40297c24c53588e6$var$hslChannels[c](value)})`).reverse();
63
- if (zChannel === "hue") bg.push(value.toString("css"));
61
+ let value = (0, $hLqEt$parseColor)('hsl(0, 100%, 50%)').withChannelValue(zChannel, zValue);
62
+ let bg = channels.filter((c)=>c !== zChannel).map((c)=>`linear-gradient(to ${c === xChannel ? end : 'top'}, ${$40297c24c53588e6$var$hslChannels[c](value)})`).reverse();
63
+ if (zChannel === 'hue') bg.push(value.toString('css'));
64
64
  colorAreaStyles = {
65
- background: bg.join(", ")
65
+ background: bg.join(', ')
66
66
  };
67
67
  break;
68
68
  }
69
- case "hsb":
69
+ case 'hsb':
70
70
  {
71
71
  let channels = state.value.getColorChannels();
72
- let value = (0, $hLqEt$parseColor)("hsb(0, 100%, 100%)").withChannelValue(zChannel, zValue);
73
- let bg = channels.filter((c)=>c !== zChannel).map((c)=>`linear-gradient(to ${c === xChannel ? end : "top"}, ${$40297c24c53588e6$var$hsbChannels[c](value)})`).reverse();
74
- if (zChannel === "hue") bg.push(value.toString("css"));
72
+ let value = (0, $hLqEt$parseColor)('hsb(0, 100%, 100%)').withChannelValue(zChannel, zValue);
73
+ let bg = channels.filter((c)=>c !== zChannel).map((c)=>`linear-gradient(to ${c === xChannel ? end : 'top'}, ${$40297c24c53588e6$var$hsbChannels[c](value)})`).reverse();
74
+ if (zChannel === 'hue') bg.push(value.toString('css'));
75
75
  colorAreaStyles = {
76
- background: bg.join(", ")
76
+ background: bg.join(', ')
77
77
  };
78
78
  break;
79
79
  }
80
80
  }
81
81
  let { x: x, y: y } = state.getThumbPosition();
82
- if (direction === "rtl") x = 1 - x;
82
+ if (direction === 'rtl') x = 1 - x;
83
83
  let forcedColorAdjustNoneStyle = {
84
- forcedColorAdjust: "none"
84
+ forcedColorAdjust: 'none'
85
85
  };
86
86
  return {
87
87
  colorAreaStyleProps: {
88
88
  style: {
89
- position: "relative",
90
- touchAction: "none",
89
+ position: 'relative',
90
+ touchAction: 'none',
91
91
  ...forcedColorAdjustNoneStyle,
92
92
  ...colorAreaStyles
93
93
  }
94
94
  },
95
95
  thumbStyleProps: {
96
96
  style: {
97
- position: "absolute",
97
+ position: 'absolute',
98
98
  left: `${x * 100}%`,
99
99
  top: `${y * 100}%`,
100
- transform: "translate(-50%, -50%)",
101
- touchAction: "none",
100
+ transform: 'translate(-50%, -50%)',
101
+ touchAction: 'none',
102
102
  ...forcedColorAdjustNoneStyle
103
103
  }
104
104
  }
package/dist/useColorChannelField.main.js CHANGED
@@ -28,7 +28,7 @@ function $d84c0c836f6e3601$export$e55dd820142d3131(props, state, inputRef) {
28
28
  onChange: undefined,
29
29
  validate: undefined,
30
30
  // Provide a default aria-label if no other label is provided.
31
- "aria-label": props["aria-label"] || (props.label || props["aria-labelledby"] ? undefined : state.colorValue.getChannelName(props.channel, locale))
31
+ 'aria-label': props['aria-label'] || (props.label || props['aria-labelledby'] ? undefined : state.colorValue.getChannelName(props.channel, locale))
32
32
  }, state, inputRef);
33
33
  }
34
34
 
package/dist/useColorChannelField.mjs CHANGED
@@ -22,7 +22,7 @@ function $5e632d1ff0188f00$export$e55dd820142d3131(props, state, inputRef) {
22
22
  onChange: undefined,
23
23
  validate: undefined,
24
24
  // Provide a default aria-label if no other label is provided.
25
- "aria-label": props["aria-label"] || (props.label || props["aria-labelledby"] ? undefined : state.colorValue.getChannelName(props.channel, locale))
25
+ 'aria-label': props['aria-label'] || (props.label || props['aria-labelledby'] ? undefined : state.colorValue.getChannelName(props.channel, locale))
26
26
  }, state, inputRef);
27
27
  }
28
28
 
package/dist/useColorChannelField.module.js CHANGED
@@ -22,7 +22,7 @@ function $5e632d1ff0188f00$export$e55dd820142d3131(props, state, inputRef) {
22
22
  onChange: undefined,
23
23
  validate: undefined,
24
24
  // Provide a default aria-label if no other label is provided.
25
- "aria-label": props["aria-label"] || (props.label || props["aria-labelledby"] ? undefined : state.colorValue.getChannelName(props.channel, locale))
25
+ 'aria-label': props['aria-label'] || (props.label || props['aria-labelledby'] ? undefined : state.colorValue.getChannelName(props.channel, locale))
26
26
  }, state, inputRef);
27
27
  }
28
28
 
package/dist/useColorField.main.js CHANGED
@@ -28,7 +28,7 @@ $parcel$export(module.exports, "useColorField", () => $58c850037bc7a7ce$export$7
28
28
 
29
29
 
30
30
  function $58c850037bc7a7ce$export$77e32ca575a28fdf(props, state, ref) {
31
- let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isWheelDisabled: isWheelDisabled, validationBehavior: validationBehavior = "aria" } = props;
31
+ let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isWheelDisabled: isWheelDisabled, validationBehavior: validationBehavior = 'aria' } = props;
32
32
  let { colorValue: colorValue, inputValue: inputValue, increment: increment, decrement: decrement, incrementToMax: incrementToMax, decrementToMin: decrementToMin, commit: commit } = state;
33
33
  let inputId = (0, $grujV$reactariautils.useId)();
34
34
  let { spinButtonProps: spinButtonProps } = (0, $grujV$reactariaspinbutton.useSpinButton)({
@@ -42,7 +42,7 @@ function $58c850037bc7a7ce$export$77e32ca575a28fdf(props, state, ref) {
42
42
  onDecrement: decrement,
43
43
  onDecrementToMin: decrementToMin,
44
44
  value: colorValue ? colorValue.toHexInt() : undefined,
45
- textValue: colorValue ? colorValue.toString("hex") : undefined
45
+ textValue: colorValue ? colorValue.toString('hex') : undefined
46
46
  });
47
47
  let [focusWithin, setFocusWithin] = (0, $grujV$react.useState)(false);
48
48
  let { focusWithinProps: focusWithinProps } = (0, $grujV$reactariainteractions.useFocusWithin)({
@@ -73,21 +73,21 @@ function $58c850037bc7a7ce$export$77e32ca575a28fdf(props, state, ref) {
73
73
  defaultValue: undefined,
74
74
  validate: undefined,
75
75
  [(0, $grujV$reactstatelyform.privateValidationStateProp)]: state,
76
- type: "text",
77
- autoComplete: "off",
76
+ type: 'text',
77
+ autoComplete: 'off',
78
78
  onChange: onChange
79
79
  }, state, ref);
80
80
  inputProps = (0, $grujV$reactariautils.mergeProps)(inputProps, spinButtonProps, focusWithinProps, {
81
- role: "textbox",
82
- "aria-valuemax": null,
83
- "aria-valuemin": null,
84
- "aria-valuenow": null,
85
- "aria-valuetext": null,
86
- autoCorrect: "off",
87
- spellCheck: "false",
81
+ role: 'textbox',
82
+ 'aria-valuemax': null,
83
+ 'aria-valuemin': null,
84
+ 'aria-valuenow': null,
85
+ 'aria-valuetext': null,
86
+ autoCorrect: 'off',
87
+ spellCheck: 'false',
88
88
  onBlur: commit
89
89
  });
90
- if (validationBehavior === "native") inputProps["aria-required"] = undefined;
90
+ if (validationBehavior === 'native') inputProps['aria-required'] = undefined;
91
91
  return {
92
92
  inputProps: inputProps,
93
93
  ...otherProps
package/dist/useColorField.mjs CHANGED
@@ -22,7 +22,7 @@ import {useSpinButton as $f8mV7$useSpinButton} from "@react-aria/spinbutton";
22
22
 
23
23
 
24
24
  function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
25
- let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isWheelDisabled: isWheelDisabled, validationBehavior: validationBehavior = "aria" } = props;
25
+ let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isWheelDisabled: isWheelDisabled, validationBehavior: validationBehavior = 'aria' } = props;
26
26
  let { colorValue: colorValue, inputValue: inputValue, increment: increment, decrement: decrement, incrementToMax: incrementToMax, decrementToMin: decrementToMin, commit: commit } = state;
27
27
  let inputId = (0, $f8mV7$useId)();
28
28
  let { spinButtonProps: spinButtonProps } = (0, $f8mV7$useSpinButton)({
@@ -36,7 +36,7 @@ function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
36
36
  onDecrement: decrement,
37
37
  onDecrementToMin: decrementToMin,
38
38
  value: colorValue ? colorValue.toHexInt() : undefined,
39
- textValue: colorValue ? colorValue.toString("hex") : undefined
39
+ textValue: colorValue ? colorValue.toString('hex') : undefined
40
40
  });
41
41
  let [focusWithin, setFocusWithin] = (0, $f8mV7$useState)(false);
42
42
  let { focusWithinProps: focusWithinProps } = (0, $f8mV7$useFocusWithin)({
@@ -67,21 +67,21 @@ function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
67
67
  defaultValue: undefined,
68
68
  validate: undefined,
69
69
  [(0, $f8mV7$privateValidationStateProp)]: state,
70
- type: "text",
71
- autoComplete: "off",
70
+ type: 'text',
71
+ autoComplete: 'off',
72
72
  onChange: onChange
73
73
  }, state, ref);
74
74
  inputProps = (0, $f8mV7$mergeProps)(inputProps, spinButtonProps, focusWithinProps, {
75
- role: "textbox",
76
- "aria-valuemax": null,
77
- "aria-valuemin": null,
78
- "aria-valuenow": null,
79
- "aria-valuetext": null,
80
- autoCorrect: "off",
81
- spellCheck: "false",
75
+ role: 'textbox',
76
+ 'aria-valuemax': null,
77
+ 'aria-valuemin': null,
78
+ 'aria-valuenow': null,
79
+ 'aria-valuetext': null,
80
+ autoCorrect: 'off',
81
+ spellCheck: 'false',
82
82
  onBlur: commit
83
83
  });
84
- if (validationBehavior === "native") inputProps["aria-required"] = undefined;
84
+ if (validationBehavior === 'native') inputProps['aria-required'] = undefined;
85
85
  return {
86
86
  inputProps: inputProps,
87
87
  ...otherProps
package/dist/useColorField.module.js CHANGED
@@ -22,7 +22,7 @@ import {useSpinButton as $f8mV7$useSpinButton} from "@react-aria/spinbutton";
22
22
 
23
23
 
24
24
  function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
25
- let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isWheelDisabled: isWheelDisabled, validationBehavior: validationBehavior = "aria" } = props;
25
+ let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isWheelDisabled: isWheelDisabled, validationBehavior: validationBehavior = 'aria' } = props;
26
26
  let { colorValue: colorValue, inputValue: inputValue, increment: increment, decrement: decrement, incrementToMax: incrementToMax, decrementToMin: decrementToMin, commit: commit } = state;
27
27
  let inputId = (0, $f8mV7$useId)();
28
28
  let { spinButtonProps: spinButtonProps } = (0, $f8mV7$useSpinButton)({
@@ -36,7 +36,7 @@ function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
36
36
  onDecrement: decrement,
37
37
  onDecrementToMin: decrementToMin,
38
38
  value: colorValue ? colorValue.toHexInt() : undefined,
39
- textValue: colorValue ? colorValue.toString("hex") : undefined
39
+ textValue: colorValue ? colorValue.toString('hex') : undefined
40
40
  });
41
41
  let [focusWithin, setFocusWithin] = (0, $f8mV7$useState)(false);
42
42
  let { focusWithinProps: focusWithinProps } = (0, $f8mV7$useFocusWithin)({
@@ -67,21 +67,21 @@ function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
67
67
  defaultValue: undefined,
68
68
  validate: undefined,
69
69
  [(0, $f8mV7$privateValidationStateProp)]: state,
70
- type: "text",
71
- autoComplete: "off",
70
+ type: 'text',
71
+ autoComplete: 'off',
72
72
  onChange: onChange
73
73
  }, state, ref);
74
74
  inputProps = (0, $f8mV7$mergeProps)(inputProps, spinButtonProps, focusWithinProps, {
75
- role: "textbox",
76
- "aria-valuemax": null,
77
- "aria-valuemin": null,
78
- "aria-valuenow": null,
79
- "aria-valuetext": null,
80
- autoCorrect: "off",
81
- spellCheck: "false",
75
+ role: 'textbox',
76
+ 'aria-valuemax': null,
77
+ 'aria-valuemin': null,
78
+ 'aria-valuenow': null,
79
+ 'aria-valuetext': null,
80
+ autoCorrect: 'off',
81
+ spellCheck: 'false',
82
82
  onBlur: commit
83
83
  });
84
- if (validationBehavior === "native") inputProps["aria-required"] = undefined;
84
+ if (validationBehavior === 'native') inputProps['aria-required'] = undefined;
85
85
  return {
86
86
  inputProps: inputProps,
87
87
  ...otherProps
package/dist/useColorSlider.main.js CHANGED
@@ -24,14 +24,14 @@ $parcel$export(module.exports, "useColorSlider", () => $afbb9647440a7f5b$export$
24
24
 
25
25
 
26
26
  function $afbb9647440a7f5b$export$106b7a4e66508f66(props, state) {
27
- let { trackRef: trackRef, inputRef: inputRef, orientation: orientation, channel: channel, "aria-label": ariaLabel, name: name } = props;
27
+ let { trackRef: trackRef, inputRef: inputRef, orientation: orientation, channel: channel, 'aria-label': ariaLabel, name: name } = props;
28
28
  let { locale: locale, direction: direction } = (0, $edxco$reactariai18n.useLocale)();
29
29
  // Provide a default aria-label if there is no other label provided.
30
- if (!props.label && !ariaLabel && !props["aria-labelledby"]) ariaLabel = state.value.getChannelName(channel, locale);
30
+ if (!props.label && !ariaLabel && !props['aria-labelledby']) ariaLabel = state.value.getChannelName(channel, locale);
31
31
  // @ts-ignore - ignore unused incompatible props
32
32
  let { groupProps: groupProps, trackProps: trackProps, labelProps: labelProps, outputProps: outputProps } = (0, $edxco$reactariaslider.useSlider)({
33
33
  ...props,
34
- "aria-label": ariaLabel
34
+ 'aria-label': ariaLabel
35
35
  }, state, trackRef);
36
36
  let { inputProps: inputProps, thumbProps: thumbProps } = (0, $edxco$reactariaslider.useSliderThumb)({
37
37
  index: 0,
@@ -44,11 +44,11 @@ function $afbb9647440a7f5b$export$106b7a4e66508f66(props, state) {
44
44
  let value = state.getDisplayColor();
45
45
  let generateBackground = ()=>{
46
46
  let to;
47
- if (orientation === "vertical") to = "top";
48
- else if (direction === "ltr") to = "right";
49
- else to = "left";
47
+ if (orientation === 'vertical') to = 'top';
48
+ else if (direction === 'ltr') to = 'right';
49
+ else to = 'left';
50
50
  switch(channel){
51
- case "hue":
51
+ case 'hue':
52
52
  {
53
53
  let stops = [
54
54
  0,
@@ -58,46 +58,46 @@ function $afbb9647440a7f5b$export$106b7a4e66508f66(props, state) {
58
58
  240,
59
59
  300,
60
60
  360
61
- ].map((hue)=>value.withChannelValue("hue", hue).toString("css")).join(", ");
61
+ ].map((hue)=>value.withChannelValue('hue', hue).toString('css')).join(', ');
62
62
  return `linear-gradient(to ${to}, ${stops})`;
63
63
  }
64
- case "lightness":
64
+ case 'lightness':
65
65
  {
66
66
  // We have to add an extra color stop in the middle so that the hue shows up at all.
67
67
  // Otherwise it will always just be black to white.
68
68
  let min = state.getThumbMinValue(0);
69
69
  let max = state.getThumbMaxValue(0);
70
- let start = value.withChannelValue(channel, min).toString("css");
71
- let middle = value.withChannelValue(channel, (max - min) / 2).toString("css");
72
- let end = value.withChannelValue(channel, max).toString("css");
70
+ let start = value.withChannelValue(channel, min).toString('css');
71
+ let middle = value.withChannelValue(channel, (max - min) / 2).toString('css');
72
+ let end = value.withChannelValue(channel, max).toString('css');
73
73
  return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;
74
74
  }
75
- case "saturation":
76
- case "brightness":
77
- case "red":
78
- case "green":
79
- case "blue":
80
- case "alpha":
75
+ case 'saturation':
76
+ case 'brightness':
77
+ case 'red':
78
+ case 'green':
79
+ case 'blue':
80
+ case 'alpha':
81
81
  {
82
- let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString("css");
83
- let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString("css");
82
+ let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString('css');
83
+ let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString('css');
84
84
  return `linear-gradient(to ${to}, ${start}, ${end})`;
85
85
  }
86
86
  default:
87
- throw new Error("Unknown color channel: " + channel);
87
+ throw new Error('Unknown color channel: ' + channel);
88
88
  }
89
89
  };
90
90
  let forcedColorAdjustNoneStyle = {
91
- forcedColorAdjust: "none"
91
+ forcedColorAdjust: 'none'
92
92
  };
93
- if (channel === "hue") inputProps["aria-valuetext"] += `, ${value.getHueName(locale)}`;
94
- else if (channel !== "alpha") inputProps["aria-valuetext"] += `, ${value.getColorName(locale)}`;
93
+ if (channel === 'hue') inputProps['aria-valuetext'] += `, ${value.getHueName(locale)}`;
94
+ else if (channel !== 'alpha') inputProps['aria-valuetext'] += `, ${value.getColorName(locale)}`;
95
95
  let { visuallyHiddenProps: visuallyHiddenProps } = (0, $edxco$reactariavisuallyhidden.useVisuallyHidden)({
96
96
  style: {
97
- opacity: "0.0001",
98
- width: "100%",
99
- height: "100%",
100
- pointerEvents: "none"
97
+ opacity: '0.0001',
98
+ width: '100%',
99
+ height: '100%',
100
+ pointerEvents: 'none'
101
101
  }
102
102
  });
103
103
  return {
package/dist/useColorSlider.mjs CHANGED
@@ -18,14 +18,14 @@ import {useVisuallyHidden as $6WsjB$useVisuallyHidden} from "@react-aria/visuall
18
18
 
19
19
 
20
20
  function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
21
- let { trackRef: trackRef, inputRef: inputRef, orientation: orientation, channel: channel, "aria-label": ariaLabel, name: name } = props;
21
+ let { trackRef: trackRef, inputRef: inputRef, orientation: orientation, channel: channel, 'aria-label': ariaLabel, name: name } = props;
22
22
  let { locale: locale, direction: direction } = (0, $6WsjB$useLocale)();
23
23
  // Provide a default aria-label if there is no other label provided.
24
- if (!props.label && !ariaLabel && !props["aria-labelledby"]) ariaLabel = state.value.getChannelName(channel, locale);
24
+ if (!props.label && !ariaLabel && !props['aria-labelledby']) ariaLabel = state.value.getChannelName(channel, locale);
25
25
  // @ts-ignore - ignore unused incompatible props
26
26
  let { groupProps: groupProps, trackProps: trackProps, labelProps: labelProps, outputProps: outputProps } = (0, $6WsjB$useSlider)({
27
27
  ...props,
28
- "aria-label": ariaLabel
28
+ 'aria-label': ariaLabel
29
29
  }, state, trackRef);
30
30
  let { inputProps: inputProps, thumbProps: thumbProps } = (0, $6WsjB$useSliderThumb)({
31
31
  index: 0,
@@ -38,11 +38,11 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
38
38
  let value = state.getDisplayColor();
39
39
  let generateBackground = ()=>{
40
40
  let to;
41
- if (orientation === "vertical") to = "top";
42
- else if (direction === "ltr") to = "right";
43
- else to = "left";
41
+ if (orientation === 'vertical') to = 'top';
42
+ else if (direction === 'ltr') to = 'right';
43
+ else to = 'left';
44
44
  switch(channel){
45
- case "hue":
45
+ case 'hue':
46
46
  {
47
47
  let stops = [
48
48
  0,
@@ -52,46 +52,46 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
52
52
  240,
53
53
  300,
54
54
  360
55
- ].map((hue)=>value.withChannelValue("hue", hue).toString("css")).join(", ");
55
+ ].map((hue)=>value.withChannelValue('hue', hue).toString('css')).join(', ');
56
56
  return `linear-gradient(to ${to}, ${stops})`;
57
57
  }
58
- case "lightness":
58
+ case 'lightness':
59
59
  {
60
60
  // We have to add an extra color stop in the middle so that the hue shows up at all.
61
61
  // Otherwise it will always just be black to white.
62
62
  let min = state.getThumbMinValue(0);
63
63
  let max = state.getThumbMaxValue(0);
64
- let start = value.withChannelValue(channel, min).toString("css");
65
- let middle = value.withChannelValue(channel, (max - min) / 2).toString("css");
66
- let end = value.withChannelValue(channel, max).toString("css");
64
+ let start = value.withChannelValue(channel, min).toString('css');
65
+ let middle = value.withChannelValue(channel, (max - min) / 2).toString('css');
66
+ let end = value.withChannelValue(channel, max).toString('css');
67
67
  return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;
68
68
  }
69
- case "saturation":
70
- case "brightness":
71
- case "red":
72
- case "green":
73
- case "blue":
74
- case "alpha":
69
+ case 'saturation':
70
+ case 'brightness':
71
+ case 'red':
72
+ case 'green':
73
+ case 'blue':
74
+ case 'alpha':
75
75
  {
76
- let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString("css");
77
- let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString("css");
76
+ let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString('css');
77
+ let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString('css');
78
78
  return `linear-gradient(to ${to}, ${start}, ${end})`;
79
79
  }
80
80
  default:
81
- throw new Error("Unknown color channel: " + channel);
81
+ throw new Error('Unknown color channel: ' + channel);
82
82
  }
83
83
  };
84
84
  let forcedColorAdjustNoneStyle = {
85
- forcedColorAdjust: "none"
85
+ forcedColorAdjust: 'none'
86
86
  };
87
- if (channel === "hue") inputProps["aria-valuetext"] += `, ${value.getHueName(locale)}`;
88
- else if (channel !== "alpha") inputProps["aria-valuetext"] += `, ${value.getColorName(locale)}`;
87
+ if (channel === 'hue') inputProps['aria-valuetext'] += `, ${value.getHueName(locale)}`;
88
+ else if (channel !== 'alpha') inputProps['aria-valuetext'] += `, ${value.getColorName(locale)}`;
89
89
  let { visuallyHiddenProps: visuallyHiddenProps } = (0, $6WsjB$useVisuallyHidden)({
90
90
  style: {
91
- opacity: "0.0001",
92
- width: "100%",
93
- height: "100%",
94
- pointerEvents: "none"
91
+ opacity: '0.0001',
92
+ width: '100%',
93
+ height: '100%',
94
+ pointerEvents: 'none'
95
95
  }
96
96
  });
97
97
  return {
package/dist/useColorSlider.module.js CHANGED
@@ -18,14 +18,14 @@ import {useVisuallyHidden as $6WsjB$useVisuallyHidden} from "@react-aria/visuall
18
18
 
19
19
 
20
20
  function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
21
- let { trackRef: trackRef, inputRef: inputRef, orientation: orientation, channel: channel, "aria-label": ariaLabel, name: name } = props;
21
+ let { trackRef: trackRef, inputRef: inputRef, orientation: orientation, channel: channel, 'aria-label': ariaLabel, name: name } = props;
22
22
  let { locale: locale, direction: direction } = (0, $6WsjB$useLocale)();
23
23
  // Provide a default aria-label if there is no other label provided.
24
- if (!props.label && !ariaLabel && !props["aria-labelledby"]) ariaLabel = state.value.getChannelName(channel, locale);
24
+ if (!props.label && !ariaLabel && !props['aria-labelledby']) ariaLabel = state.value.getChannelName(channel, locale);
25
25
  // @ts-ignore - ignore unused incompatible props
26
26
  let { groupProps: groupProps, trackProps: trackProps, labelProps: labelProps, outputProps: outputProps } = (0, $6WsjB$useSlider)({
27
27
  ...props,
28
- "aria-label": ariaLabel
28
+ 'aria-label': ariaLabel
29
29
  }, state, trackRef);
30
30
  let { inputProps: inputProps, thumbProps: thumbProps } = (0, $6WsjB$useSliderThumb)({
31
31
  index: 0,
@@ -38,11 +38,11 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
38
38
  let value = state.getDisplayColor();
39
39
  let generateBackground = ()=>{
40
40
  let to;
41
- if (orientation === "vertical") to = "top";
42
- else if (direction === "ltr") to = "right";
43
- else to = "left";
41
+ if (orientation === 'vertical') to = 'top';
42
+ else if (direction === 'ltr') to = 'right';
43
+ else to = 'left';
44
44
  switch(channel){
45
- case "hue":
45
+ case 'hue':
46
46
  {
47
47
  let stops = [
48
48
  0,
@@ -52,46 +52,46 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
52
52
  240,
53
53
  300,
54
54
  360
55
- ].map((hue)=>value.withChannelValue("hue", hue).toString("css")).join(", ");
55
+ ].map((hue)=>value.withChannelValue('hue', hue).toString('css')).join(', ');
56
56
  return `linear-gradient(to ${to}, ${stops})`;
57
57
  }
58
- case "lightness":
58
+ case 'lightness':
59
59
  {
60
60
  // We have to add an extra color stop in the middle so that the hue shows up at all.
61
61
  // Otherwise it will always just be black to white.
62
62
  let min = state.getThumbMinValue(0);
63
63
  let max = state.getThumbMaxValue(0);
64
- let start = value.withChannelValue(channel, min).toString("css");
65
- let middle = value.withChannelValue(channel, (max - min) / 2).toString("css");
66
- let end = value.withChannelValue(channel, max).toString("css");
64
+ let start = value.withChannelValue(channel, min).toString('css');
65
+ let middle = value.withChannelValue(channel, (max - min) / 2).toString('css');
66
+ let end = value.withChannelValue(channel, max).toString('css');
67
67
  return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;
68
68
  }
69
- case "saturation":
70
- case "brightness":
71
- case "red":
72
- case "green":
73
- case "blue":
74
- case "alpha":
69
+ case 'saturation':
70
+ case 'brightness':
71
+ case 'red':
72
+ case 'green':
73
+ case 'blue':
74
+ case 'alpha':
75
75
  {
76
- let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString("css");
77
- let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString("css");
76
+ let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString('css');
77
+ let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString('css');
78
78
  return `linear-gradient(to ${to}, ${start}, ${end})`;
79
79
  }
80
80
  default:
81
- throw new Error("Unknown color channel: " + channel);
81
+ throw new Error('Unknown color channel: ' + channel);
82
82
  }
83
83
  };
84
84
  let forcedColorAdjustNoneStyle = {
85
- forcedColorAdjust: "none"
85
+ forcedColorAdjust: 'none'
86
86
  };
87
- if (channel === "hue") inputProps["aria-valuetext"] += `, ${value.getHueName(locale)}`;
88
- else if (channel !== "alpha") inputProps["aria-valuetext"] += `, ${value.getColorName(locale)}`;
87
+ if (channel === 'hue') inputProps['aria-valuetext'] += `, ${value.getHueName(locale)}`;
88
+ else if (channel !== 'alpha') inputProps['aria-valuetext'] += `, ${value.getColorName(locale)}`;
89
89
  let { visuallyHiddenProps: visuallyHiddenProps } = (0, $6WsjB$useVisuallyHidden)({
90
90
  style: {
91
- opacity: "0.0001",
92
- width: "100%",
93
- height: "100%",
94
- pointerEvents: "none"
91
+ opacity: '0.0001',
92
+ width: '100%',
93
+ height: '100%',
94
+ pointerEvents: 'none'
95
95
  }
96
96
  });
97
97
  return {