@sanity/color-input 6.0.11 → 6.0.13

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 (7) hide show
  1. package/dist/_chunks-es/ColorInput.js +930 -753
  2. package/dist/_chunks-es/ColorInput.js.map +1 -1
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.d.ts.map +1 -1
  5. package/dist/index.js +143 -132
  6. package/dist/index.js.map +1 -1
  7. package/package.json +7 -8
package/dist/_chunks-es/ColorInput.js CHANGED
@@ -1,790 +1,967 @@
1
- import { jsx, jsxs, Fragment } from "react/jsx-runtime";
1
+ import { set, setIfMissing, unset } from "sanity";
2
+ import { Component, PureComponent, startTransition, useOptimistic, useRef } from "react";
3
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
4
  import { c } from "react/compiler-runtime";
3
5
  import { AddIcon } from "@sanity/icons/Add";
4
6
  import { TrashIcon } from "@sanity/icons/Trash";
5
- import { Flex, useTheme, Box, Button, Stack, Text, Inline, Card } from "@sanity/ui";
6
- import { Component, PureComponent, useOptimistic, useRef, startTransition } from "react";
7
- import { unset, set, setIfMissing } from "sanity";
7
+ import { Box, Button, Card, Flex, Inline, Stack, Text, useTheme } from "@sanity/ui";
8
8
  import { styled } from "styled-components";
9
9
  import tinycolor from "tinycolor2";
10
- import throttle from "lodash-es/throttle";
11
- const ColorListWrap = /* @__PURE__ */ styled(Flex).withConfig({
12
- displayName: "ColorListWrap",
13
- componentId: "sc-nrr1l2-0"
14
- })(["gap:0.25em;"]), ColorBoxContainer = /* @__PURE__ */ styled.div.withConfig({
15
- displayName: "ColorBoxContainer",
16
- componentId: "sc-nrr1l2-1"
17
- })(["width:2.1em;height:2.1em;cursor:pointer;position:relative;overflow:hidden;border-radius:3px;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=') left center #fff;"]), ColorBox$1 = /* @__PURE__ */ styled.div.withConfig({
18
- displayName: "ColorBox",
19
- componentId: "sc-nrr1l2-2"
20
- })(["border-radius:inherit;box-shadow:inset 0 0 0 1px var(--card-shadow-outline-color);content:'';position:absolute;inset:0;z-index:1;"]), validateColors = (colors) => {
21
- const seen = /* @__PURE__ */ new Set();
22
- return colors.reduce((cls, c2) => {
23
- const color = c2.hex ? tinycolor(c2.hex) : tinycolor(c2);
24
- if (color.isValid()) {
25
- const backgroundColor = color.toRgbString(), key = JSON.stringify({
26
- color: c2,
27
- backgroundColor
28
- });
29
- seen.has(key) || (seen.add(key), cls.push({
30
- key,
31
- color: c2,
32
- backgroundColor
33
- }));
34
- }
35
- return cls;
36
- }, []);
10
+ import throttle from "lodash-es/throttle.js";
11
+ const ColorListWrap = styled(Flex).withConfig({
12
+ displayName: "ColorListWrap",
13
+ componentId: "sc-fcjsbz-0"
14
+ })`gap:0.25em;`, ColorBoxContainer = styled.div.withConfig({
15
+ displayName: "ColorBoxContainer",
16
+ componentId: "sc-fcjsbz-1"
17
+ })`width:2.1em;height:2.1em;cursor:pointer;position:relative;overflow:hidden;border-radius:3px;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=') left center #fff;`, ColorBox$1 = styled.div.withConfig({
18
+ displayName: "ColorBox",
19
+ componentId: "sc-fcjsbz-2"
20
+ })`border-radius:inherit;box-shadow:inset 0 0 0 1px var(--card-shadow-outline-color);content:'';position:absolute;inset:0;z-index:1;`, validateColors = (colors) => {
21
+ let seen = /* @__PURE__ */ new Set();
22
+ return colors.reduce((cls, c) => {
23
+ let color = c.hex ? tinycolor(c.hex) : tinycolor(c);
24
+ if (color.isValid()) {
25
+ let backgroundColor = color.toRgbString(), key = JSON.stringify({
26
+ color: c,
27
+ backgroundColor
28
+ });
29
+ seen.has(key) || (seen.add(key), cls.push({
30
+ key,
31
+ color: c,
32
+ backgroundColor
33
+ }));
34
+ }
35
+ return cls;
36
+ }, []);
37
37
  };
38
38
  function ColorList(t0) {
39
- const $ = c(7), {
40
- colors,
41
- onChange
42
- } = t0;
43
- if (!colors)
44
- return null;
45
- let t1;
46
- if ($[0] !== colors || $[1] !== onChange) {
47
- let t22;
48
- $[3] !== onChange ? (t22 = (t3) => {
49
- const {
50
- key,
51
- color,
52
- backgroundColor
53
- } = t3;
54
- return /* @__PURE__ */ jsx(ColorBoxContainer, { onClick: () => {
55
- onChange(color);
56
- }, children: /* @__PURE__ */ jsx(ColorBox$1, { style: {
57
- background: backgroundColor
58
- } }) }, key);
59
- }, $[3] = onChange, $[4] = t22) : t22 = $[4], t1 = validateColors(colors).map(t22), $[0] = colors, $[1] = onChange, $[2] = t1;
60
- } else
61
- t1 = $[2];
62
- let t2;
63
- return $[5] !== t1 ? (t2 = /* @__PURE__ */ jsx(ColorListWrap, { wrap: "wrap", children: t1 }), $[5] = t1, $[6] = t2) : t2 = $[6], t2;
39
+ let $ = c(7), { colors, onChange } = t0;
40
+ if (!colors) return null;
41
+ let t1;
42
+ if ($[0] !== colors || $[1] !== onChange) {
43
+ let t2;
44
+ $[3] === onChange ? t2 = $[4] : (t2 = (t3) => {
45
+ let { key, color, backgroundColor } = t3;
46
+ return /* @__PURE__ */ jsx(ColorBoxContainer, {
47
+ onClick: () => {
48
+ onChange(color);
49
+ },
50
+ children: /* @__PURE__ */ jsx(ColorBox$1, { style: { background: backgroundColor } })
51
+ }, key);
52
+ }, $[3] = onChange, $[4] = t2), t1 = validateColors(colors).map(t2), $[0] = colors, $[1] = onChange, $[2] = t1;
53
+ } else t1 = $[2];
54
+ let t2;
55
+ return $[5] === t1 ? t2 = $[6] : (t2 = /* @__PURE__ */ jsx(ColorListWrap, {
56
+ wrap: "wrap",
57
+ children: t1
58
+ }), $[5] = t1, $[6] = t2), t2;
64
59
  }
60
+ /**
61
+ * Renders a checkerboard pattern as a data URL, used as the transparency backdrop.
62
+ *
63
+ * Forked from
64
+ * {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/helpers/checkboard.js | react-color's checkboard helper}
65
+ * (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
66
+ */
65
67
  const checkboardCache = {};
66
68
  function render(c1, c2, size, serverCanvas) {
67
- if (typeof document > "u" && !serverCanvas)
68
- return null;
69
- const canvas = serverCanvas ? new serverCanvas() : document.createElement("canvas");
70
- canvas.width = size * 2, canvas.height = size * 2;
71
- const ctx = canvas.getContext("2d");
72
- return ctx ? (ctx.fillStyle = c1, ctx.fillRect(0, 0, canvas.width, canvas.height), ctx.fillStyle = c2, ctx.fillRect(0, 0, size, size), ctx.translate(size, size), ctx.fillRect(0, 0, size, size), canvas.toDataURL()) : null;
69
+ if (typeof document > "u" && !serverCanvas) return null;
70
+ let canvas = serverCanvas ? new serverCanvas() : document.createElement("canvas");
71
+ canvas.width = size * 2, canvas.height = size * 2;
72
+ let ctx = canvas.getContext("2d");
73
+ return ctx ? (ctx.fillStyle = c1, ctx.fillRect(0, 0, canvas.width, canvas.height), ctx.fillStyle = c2, ctx.fillRect(0, 0, size, size), ctx.translate(size, size), ctx.fillRect(0, 0, size, size), canvas.toDataURL()) : null;
73
74
  }
74
75
  function get(c1, c2, size, serverCanvas) {
75
- const key = `${c1}-${c2}-${size}${serverCanvas ? "-server" : ""}`, cached = checkboardCache[key];
76
- if (cached)
77
- return cached;
78
- const checkboard = render(c1, c2, size, serverCanvas);
79
- return checkboardCache[key] = checkboard, checkboard;
76
+ let key = `${c1}-${c2}-${size}${serverCanvas ? "-server" : ""}`, cached = checkboardCache[key];
77
+ if (cached) return cached;
78
+ let checkboard = render(c1, c2, size, serverCanvas);
79
+ return checkboardCache[key] = checkboard, checkboard;
80
80
  }
81
81
  const EMPTY_RENDERERS = {};
82
82
  function Checkboard(t0) {
83
- const $ = c(9), {
84
- white: t1,
85
- grey: t2,
86
- size: t3,
87
- renderers: t4,
88
- borderRadius,
89
- boxShadow
90
- } = t0, white = t1 === void 0 ? "transparent" : t1, grey = t2 === void 0 ? "rgba(0,0,0,.08)" : t2, size = t3 === void 0 ? 8 : t3, renderers = t4 === void 0 ? EMPTY_RENDERERS : t4;
91
- let t5;
92
- $[0] !== grey || $[1] !== renderers.canvas || $[2] !== size || $[3] !== white ? (t5 = get(white, grey, size, renderers.canvas), $[0] = grey, $[1] = renderers.canvas, $[2] = size, $[3] = white, $[4] = t5) : t5 = $[4];
93
- const background = t5, t6 = background ? `url(${background}) center left` : void 0;
94
- let t7;
95
- return $[5] !== borderRadius || $[6] !== boxShadow || $[7] !== t6 ? (t7 = /* @__PURE__ */ jsx("div", { style: {
96
- borderRadius,
97
- boxShadow,
98
- position: "absolute",
99
- inset: 0,
100
- background: t6
101
- } }), $[5] = borderRadius, $[6] = boxShadow, $[7] = t6, $[8] = t7) : t7 = $[8], t7;
83
+ let $ = c(9), { white: t1, grey: t2, size: t3, renderers: t4, borderRadius, boxShadow } = t0, white = t1 === void 0 ? "transparent" : t1, grey = t2 === void 0 ? "rgba(0,0,0,.08)" : t2, size = t3 === void 0 ? 8 : t3, renderers = t4 === void 0 ? EMPTY_RENDERERS : t4, t5;
84
+ $[0] !== grey || $[1] !== renderers.canvas || $[2] !== size || $[3] !== white ? (t5 = get(white, grey, size, renderers.canvas), $[0] = grey, $[1] = renderers.canvas, $[2] = size, $[3] = white, $[4] = t5) : t5 = $[4];
85
+ let background = t5, t6 = background ? `url(${background}) center left` : void 0, t7;
86
+ return $[5] !== borderRadius || $[6] !== boxShadow || $[7] !== t6 ? (t7 = /* @__PURE__ */ jsx("div", { style: {
87
+ borderRadius,
88
+ boxShadow,
89
+ position: "absolute",
90
+ inset: 0,
91
+ background: t6
92
+ } }), $[5] = borderRadius, $[6] = boxShadow, $[7] = t6, $[8] = t7) : t7 = $[8], t7;
102
93
  }
103
94
  function calculateChange$2(e, hsl, direction, initialA, container) {
104
- const containerWidth = container.clientWidth, containerHeight = container.clientHeight, x = "touches" in e ? e.touches[0]?.pageX ?? 0 : e.pageX, y = "touches" in e ? e.touches[0]?.pageY ?? 0 : e.pageY, left = x - (container.getBoundingClientRect().left + window.scrollX), top = y - (container.getBoundingClientRect().top + window.scrollY);
105
- if (direction === "vertical") {
106
- let a2;
107
- return top < 0 ? a2 = 0 : top > containerHeight ? a2 = 1 : a2 = Math.round(top * 100 / containerHeight) / 100, hsl.a !== a2 ? {
108
- h: hsl.h,
109
- s: hsl.s,
110
- l: hsl.l,
111
- a: a2,
112
- source: "rgb"
113
- } : null;
114
- }
115
- let a;
116
- return left < 0 ? a = 0 : left > containerWidth ? a = 1 : a = Math.round(left * 100 / containerWidth) / 100, initialA !== a ? {
117
- h: hsl.h,
118
- s: hsl.s,
119
- l: hsl.l,
120
- a,
121
- source: "rgb"
122
- } : null;
95
+ let containerWidth = container.clientWidth, containerHeight = container.clientHeight, x = "touches" in e ? e.touches[0]?.pageX ?? 0 : e.pageX, y = "touches" in e ? e.touches[0]?.pageY ?? 0 : e.pageY, left = x - (container.getBoundingClientRect().left + window.scrollX), top = y - (container.getBoundingClientRect().top + window.scrollY);
96
+ if (direction === "vertical") {
97
+ let a;
98
+ return a = top < 0 ? 0 : top > containerHeight ? 1 : Math.round(top * 100 / containerHeight) / 100, hsl.a === a ? null : {
99
+ h: hsl.h,
100
+ s: hsl.s,
101
+ l: hsl.l,
102
+ a,
103
+ source: "rgb"
104
+ };
105
+ }
106
+ let a;
107
+ return a = left < 0 ? 0 : left > containerWidth ? 1 : Math.round(left * 100 / containerWidth) / 100, initialA === a ? null : {
108
+ h: hsl.h,
109
+ s: hsl.s,
110
+ l: hsl.l,
111
+ a,
112
+ source: "rgb"
113
+ };
123
114
  }
124
- class Alpha extends Component {
125
- container = null;
126
- componentWillUnmount() {
127
- this.unbindEventListeners();
128
- }
129
- setContainerRef = (node) => {
130
- this.container = node;
131
- };
132
- handleChange = (event) => {
133
- if (!this.container)
134
- return;
135
- const change = calculateChange$2(event, this.props.hsl, this.props.direction, this.props.a, this.container);
136
- change && typeof this.props.onChange == "function" && this.props.onChange(change);
137
- };
138
- handleMouseDown = (event) => {
139
- this.handleChange(event.nativeEvent), window.addEventListener("mousemove", this.handleChange), window.addEventListener("mouseup", this.handleMouseUp);
140
- };
141
- handleMouseUp = () => {
142
- this.unbindEventListeners();
143
- };
144
- unbindEventListeners = () => {
145
- window.removeEventListener("mousemove", this.handleChange), window.removeEventListener("mouseup", this.handleMouseUp);
146
- };
147
- render() {
148
- const {
149
- rgb,
150
- direction,
151
- radius,
152
- shadow,
153
- renderers
154
- } = this.props, alphaValue = rgb.a ?? 1, gradient = direction === "vertical" ? `linear-gradient(to bottom, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%, rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)` : `linear-gradient(to right, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%, rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)`, pointerStyle = direction === "vertical" ? {
155
- position: "absolute",
156
- left: 0,
157
- top: `${alphaValue * 100}%`
158
- } : {
159
- position: "absolute",
160
- left: `${alphaValue * 100}%`
161
- };
162
- return /* @__PURE__ */ jsxs("div", { style: {
163
- position: "absolute",
164
- inset: 0,
165
- borderRadius: radius
166
- }, children: [
167
- /* @__PURE__ */ jsx("div", { style: {
168
- position: "absolute",
169
- inset: 0,
170
- overflow: "hidden",
171
- borderRadius: radius
172
- }, children: /* @__PURE__ */ jsx(Checkboard, { renderers }) }),
173
- /* @__PURE__ */ jsx("div", { style: {
174
- position: "absolute",
175
- inset: 0,
176
- background: gradient,
177
- boxShadow: shadow,
178
- borderRadius: radius
179
- } }),
180
- /* @__PURE__ */ jsx("div", { style: {
181
- position: "relative",
182
- height: "100%",
183
- margin: "0 3px"
184
- }, ref: this.setContainerRef, onMouseDown: this.handleMouseDown, onTouchMove: this.handleChange, onTouchStart: this.handleChange, children: /* @__PURE__ */ jsx("div", { style: pointerStyle, children: /* @__PURE__ */ jsx("div", { style: {
185
- width: "4px",
186
- borderRadius: "1px",
187
- height: "8px",
188
- boxShadow: "0 0 2px rgba(0, 0, 0, .6)",
189
- background: "#fff",
190
- marginTop: "1px",
191
- transform: "translateX(-2px)"
192
- } }) }) })
193
- ] });
194
- }
195
- }
196
- const VALIDATION_KEYS = /* @__PURE__ */ new Set(["r", "g", "b", "a", "h", "s", "l", "v"]), PERCENT_PATTERN = /^\d+%$/;
115
+ /**
116
+ * Alpha (transparency) slider.
117
+ *
118
+ * Forked from
119
+ * {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/Alpha.js | react-color's Alpha}
120
+ * (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
121
+ *
122
+ * @remarks
123
+ * Kept as a class component for this round (function-component conversion is a
124
+ * follow-up PR). `reactcss` has been removed in favor of plain inline styles,
125
+ * and the unused custom `pointer` slot dropped.
126
+ */
127
+ var Alpha = class extends Component {
128
+ container = null;
129
+ componentWillUnmount() {
130
+ this.unbindEventListeners();
131
+ }
132
+ setContainerRef = (node) => {
133
+ this.container = node;
134
+ };
135
+ handleChange = (event) => {
136
+ if (!this.container) return;
137
+ let change = calculateChange$2(event, this.props.hsl, this.props.direction, this.props.a, this.container);
138
+ change && typeof this.props.onChange == "function" && this.props.onChange(change);
139
+ };
140
+ handleMouseDown = (event) => {
141
+ this.handleChange(event.nativeEvent), window.addEventListener("mousemove", this.handleChange), window.addEventListener("mouseup", this.handleMouseUp);
142
+ };
143
+ handleMouseUp = () => {
144
+ this.unbindEventListeners();
145
+ };
146
+ unbindEventListeners = () => {
147
+ window.removeEventListener("mousemove", this.handleChange), window.removeEventListener("mouseup", this.handleMouseUp);
148
+ };
149
+ render() {
150
+ let { rgb, direction, radius, shadow, renderers } = this.props, alphaValue = rgb.a ?? 1, gradient = direction === "vertical" ? `linear-gradient(to bottom, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%, rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)` : `linear-gradient(to right, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%, rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)`, pointerStyle = direction === "vertical" ? {
151
+ position: "absolute",
152
+ left: 0,
153
+ top: `${alphaValue * 100}%`
154
+ } : {
155
+ position: "absolute",
156
+ left: `${alphaValue * 100}%`
157
+ };
158
+ return /* @__PURE__ */ jsxs("div", {
159
+ style: {
160
+ position: "absolute",
161
+ inset: 0,
162
+ borderRadius: radius
163
+ },
164
+ children: [
165
+ /* @__PURE__ */ jsx("div", {
166
+ style: {
167
+ position: "absolute",
168
+ inset: 0,
169
+ overflow: "hidden",
170
+ borderRadius: radius
171
+ },
172
+ children: /* @__PURE__ */ jsx(Checkboard, { renderers })
173
+ }),
174
+ /* @__PURE__ */ jsx("div", { style: {
175
+ position: "absolute",
176
+ inset: 0,
177
+ background: gradient,
178
+ boxShadow: shadow,
179
+ borderRadius: radius
180
+ } }),
181
+ /* @__PURE__ */ jsx("div", {
182
+ style: {
183
+ position: "relative",
184
+ height: "100%",
185
+ margin: "0 3px"
186
+ },
187
+ ref: this.setContainerRef,
188
+ onMouseDown: this.handleMouseDown,
189
+ onTouchMove: this.handleChange,
190
+ onTouchStart: this.handleChange,
191
+ children: /* @__PURE__ */ jsx("div", {
192
+ style: pointerStyle,
193
+ children: /* @__PURE__ */ jsx("div", { style: {
194
+ width: "4px",
195
+ borderRadius: "1px",
196
+ height: "8px",
197
+ boxShadow: "0 0 2px rgba(0, 0, 0, .6)",
198
+ background: "#fff",
199
+ marginTop: "1px",
200
+ transform: "translateX(-2px)"
201
+ } })
202
+ })
203
+ })
204
+ ]
205
+ });
206
+ }
207
+ };
208
+ /**
209
+ * Color conversion and validation helpers built on `tinycolor2`.
210
+ *
211
+ * Forked from
212
+ * {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/helpers/color.js | react-color's color helpers}
213
+ * (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
214
+ */
215
+ const VALIDATION_KEYS = /* @__PURE__ */ new Set([
216
+ "r",
217
+ "g",
218
+ "b",
219
+ "a",
220
+ "h",
221
+ "s",
222
+ "l",
223
+ "v"
224
+ ]), PERCENT_PATTERN = /^\d+%$/;
197
225
  function simpleCheckForValidColor(data) {
198
- if (typeof data == "string")
199
- return data;
200
- let checked = 0, passed = 0;
201
- for (const [key, value] of Object.entries(data))
202
- !VALIDATION_KEYS.has(key) || !value || (checked += 1, Number.isNaN(Number(value)) || (passed += 1), (key === "s" || key === "l") && PERCENT_PATTERN.test(String(value)) && (passed += 1));
203
- return checked === passed ? data : !1;
226
+ if (typeof data == "string") return data;
227
+ let checked = 0, passed = 0;
228
+ for (let [key, value] of Object.entries(data)) !VALIDATION_KEYS.has(key) || !value || (checked += 1, Number.isNaN(Number(value)) || (passed += 1), (key === "s" || key === "l") && PERCENT_PATTERN.test(String(value)) && (passed += 1));
229
+ return checked === passed && data;
204
230
  }
205
231
  function toState(data, oldHue) {
206
- const instance = typeof data == "string" ? tinycolor(data) : "hex" in data ? tinycolor(data.hex) : tinycolor(data), hsl = instance.toHsl(), hsv = instance.toHsv(), rgb = instance.toRgb(), hex = instance.toHex();
207
- hsl.s === 0 && (hsl.h = oldHue ?? 0, hsv.h = oldHue ?? 0);
208
- const transparent = hex === "000000" && rgb.a === 0, incomingHue = typeof data == "string" ? void 0 : "h" in data ? data.h : void 0, source = typeof data == "string" ? void 0 : data.source;
209
- return {
210
- hsl,
211
- hex: transparent ? "transparent" : `#${hex}`,
212
- rgb,
213
- hsv,
214
- oldHue: incomingHue || oldHue || hsl.h,
215
- source: source ?? ""
216
- };
232
+ let instance = typeof data == "string" ? tinycolor(data) : "hex" in data ? tinycolor(data.hex) : tinycolor(data), hsl = instance.toHsl(), hsv = instance.toHsv(), rgb = instance.toRgb(), hex = instance.toHex();
233
+ hsl.s === 0 && (hsl.h = oldHue ?? 0, hsv.h = oldHue ?? 0);
234
+ let transparent = hex === "000000" && rgb.a === 0, incomingHue = typeof data == "string" ? void 0 : "h" in data ? data.h : void 0, source = typeof data == "string" ? void 0 : data.source;
235
+ return {
236
+ hsl,
237
+ hex: transparent ? "transparent" : `#${hex}`,
238
+ rgb,
239
+ hsv,
240
+ oldHue: incomingHue || oldHue || hsl.h,
241
+ source: source ?? ""
242
+ };
217
243
  }
218
244
  function isValidHex(hex) {
219
- if (hex === "transparent")
220
- return !0;
221
- const lh = hex.charAt(0) === "#" ? 1 : 0;
222
- return hex.length !== 4 + lh && hex.length < 7 + lh && tinycolor(hex).isValid();
245
+ if (hex === "transparent") return !0;
246
+ let lh = +(hex.charAt(0) === "#");
247
+ return hex.length !== 4 + lh && hex.length < 7 + lh && tinycolor(hex).isValid();
223
248
  }
249
+ /**
250
+ * `CustomPicker` higher-order component: manages color state and injects the
251
+ * normalized color (`hsl`/`hsv`/`rgb`/`hex`) plus an `onChange` handler into the
252
+ * wrapped picker.
253
+ *
254
+ * Forked from
255
+ * {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/ColorWrap.js | react-color's ColorWrap}
256
+ * (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
257
+ *
258
+ * @remarks
259
+ * Kept as a class component for this round (function-component conversion is a
260
+ * follow-up PR). `prop-types` and the unused `lodash` `debounce` of
261
+ * `onChangeComplete` have been removed.
262
+ */
224
263
  const DEFAULT_COLOR$1 = {
225
- h: 250,
226
- s: 0.5,
227
- l: 0.2,
228
- a: 1
264
+ h: 250,
265
+ s: .5,
266
+ l: .2,
267
+ a: 1
229
268
  };
230
269
  function CustomPicker(Picker) {
231
- class ColorPicker2 extends PureComponent {
232
- static getDerivedStateFromProps(nextProps, state) {
233
- return {
234
- ...toState(nextProps.color ?? DEFAULT_COLOR$1, state.oldHue)
235
- };
236
- }
237
- constructor(props) {
238
- super(props), this.state = {
239
- ...toState(props.color ?? DEFAULT_COLOR$1, 0)
240
- };
241
- }
242
- handleChange = (data) => {
243
- if (!simpleCheckForValidColor(data))
244
- return;
245
- const incomingHue = typeof data == "string" ? void 0 : "h" in data ? data.h : void 0, colors = toState(data, incomingHue || this.state.oldHue);
246
- this.setState(colors), this.props.onChange?.(colors);
247
- };
248
- render() {
249
- const injected = {
250
- hsl: this.state.hsl,
251
- hsv: this.state.hsv,
252
- rgb: this.state.rgb,
253
- hex: this.state.hex,
254
- oldHue: this.state.oldHue,
255
- source: this.state.source,
256
- onChange: this.handleChange
257
- }, pickerProps = {
258
- ...this.props,
259
- ...injected
260
- };
261
- return /* @__PURE__ */ jsx(Picker, { ...pickerProps });
262
- }
263
- }
264
- return ColorPicker2;
270
+ class ColorPicker extends PureComponent {
271
+ static getDerivedStateFromProps(nextProps, state) {
272
+ return { ...toState(nextProps.color ?? DEFAULT_COLOR$1, state.oldHue) };
273
+ }
274
+ constructor(props) {
275
+ super(props), this.state = { ...toState(props.color ?? DEFAULT_COLOR$1, 0) };
276
+ }
277
+ handleChange = (data) => {
278
+ if (!simpleCheckForValidColor(data)) return;
279
+ let colors = toState(data, (typeof data == "string" ? void 0 : "h" in data ? data.h : void 0) || this.state.oldHue);
280
+ this.setState(colors), this.props.onChange?.(colors);
281
+ };
282
+ render() {
283
+ let injected = {
284
+ hsl: this.state.hsl,
285
+ hsv: this.state.hsv,
286
+ rgb: this.state.rgb,
287
+ hex: this.state.hex,
288
+ oldHue: this.state.oldHue,
289
+ source: this.state.source,
290
+ onChange: this.handleChange
291
+ };
292
+ return /* @__PURE__ */ jsx(Picker, {
293
+ ...this.props,
294
+ ...injected
295
+ });
296
+ }
297
+ }
298
+ return ColorPicker;
265
299
  }
266
- const DEFAULT_ARROW_OFFSET = 1, getNumberValue = (value) => Number(String(value).replace(/%/g, ""));
300
+ /**
301
+ * Labeled text input with arrow-key stepping and drag-to-change support.
302
+ *
303
+ * Forked from
304
+ * {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/EditableInput.js | react-color's EditableInput}
305
+ * (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
306
+ *
307
+ * @remarks
308
+ * Kept as a class component for this round; converting to a function component
309
+ * (with `useId`, `useRef`, etc.) is deferred to a follow-up PR. `reactcss` and
310
+ * `prop-types` have been removed, and deprecated `keyCode` checks replaced with
311
+ * `event.key`.
312
+ */
313
+ const getNumberValue = (value) => Number(String(value).replace(/%/g, ""));
267
314
  let idCounter = 1;
268
- class EditableInput extends Component {
269
- input = null;
270
- constructor(props) {
271
- super(props);
272
- const initialValue = String(props.value ?? "").toUpperCase();
273
- this.state = {
274
- value: initialValue,
275
- blurValue: initialValue
276
- }, this.inputId = `rc-editable-input-${idCounter++}`;
277
- }
278
- componentDidUpdate(prevProps, prevState) {
279
- if (this.props.value !== this.state.value && (prevProps.value !== this.props.value || prevState.value !== this.state.value)) {
280
- const nextValue = String(this.props.value ?? "").toUpperCase(), isFocused = this.input === document.activeElement;
281
- this.setState(isFocused ? {
282
- blurValue: nextValue
283
- } : {
284
- value: nextValue,
285
- blurValue: this.state.blurValue ? "" : nextValue
286
- });
287
- }
288
- }
289
- componentWillUnmount() {
290
- this.unbindEventListeners();
291
- }
292
- setInputRef = (input) => {
293
- this.input = input;
294
- };
295
- getValueObjectWithLabel = (value) => ({
296
- [this.props.label]: String(value)
297
- });
298
- getArrowOffset = () => this.props.arrowOffset ?? DEFAULT_ARROW_OFFSET;
299
- setUpdatedValue = (value, event) => {
300
- this.props.onChange?.(this.getValueObjectWithLabel(value), event), this.setState({
301
- value: String(value)
302
- });
303
- };
304
- handleBlur = () => {
305
- this.state.blurValue && this.setState({
306
- value: this.state.blurValue,
307
- blurValue: ""
308
- });
309
- };
310
- handleChange = (event) => {
311
- this.setUpdatedValue(event.target.value, event);
312
- };
313
- handleKeyDown = (event) => {
314
- const value = getNumberValue(event.currentTarget.value), isUp = event.key === "ArrowUp", isDown = event.key === "ArrowDown";
315
- if (!Number.isNaN(value) && (isUp || isDown)) {
316
- const offset = this.getArrowOffset(), updatedValue = isUp ? value + offset : value - offset;
317
- this.setUpdatedValue(updatedValue, event);
318
- }
319
- };
320
- handleDrag = (event) => {
321
- if (!this.props.dragLabel)
322
- return;
323
- const {
324
- dragMax,
325
- value
326
- } = this.props, numericValue = typeof value == "number" ? value : Number(value), newValue = Math.round(numericValue + event.movementX);
327
- dragMax !== void 0 && newValue >= 0 && newValue <= dragMax && this.props.onChange?.(this.getValueObjectWithLabel(newValue), event);
328
- };
329
- handleMouseDown = (event) => {
330
- this.props.dragLabel && (event.preventDefault(), this.handleDrag(event.nativeEvent), window.addEventListener("mousemove", this.handleDrag), window.addEventListener("mouseup", this.handleMouseUp));
331
- };
332
- handleMouseUp = () => {
333
- this.unbindEventListeners();
334
- };
335
- unbindEventListeners = () => {
336
- window.removeEventListener("mousemove", this.handleDrag), window.removeEventListener("mouseup", this.handleMouseUp);
337
- };
338
- render() {
339
- const style = this.props.style ?? {}, wrapStyle = {
340
- position: "relative",
341
- ...style.wrap
342
- }, inputStyle = {
343
- ...style.input
344
- }, labelStyle = {
345
- ...style.label,
346
- ...this.props.dragLabel ? {
347
- cursor: "ew-resize"
348
- } : null
349
- };
350
- return /* @__PURE__ */ jsxs("div", { style: wrapStyle, children: [
351
- /* @__PURE__ */ jsx("input", { id: this.inputId, style: inputStyle, ref: this.setInputRef, value: this.state.value, onKeyDown: this.handleKeyDown, onChange: this.handleChange, onBlur: this.handleBlur, placeholder: this.props.placeholder, spellCheck: "false" }),
352
- this.props.label && !this.props.hideLabel ? (
353
- // oxlint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the label is a drag affordance using pointer coordinates; the input also supports arrow-key stepping
354
- /* @__PURE__ */ jsx("label", { htmlFor: this.inputId, style: labelStyle, onMouseDown: this.handleMouseDown, children: this.props.label })
355
- ) : null
356
- ] });
357
- }
358
- }
315
+ var EditableInput = class extends Component {
316
+ inputId;
317
+ input = null;
318
+ constructor(props) {
319
+ super(props);
320
+ let initialValue = String(props.value ?? "").toUpperCase();
321
+ this.state = {
322
+ value: initialValue,
323
+ blurValue: initialValue
324
+ }, this.inputId = `rc-editable-input-${idCounter++}`;
325
+ }
326
+ componentDidUpdate(prevProps, prevState) {
327
+ if (this.props.value !== this.state.value && (prevProps.value !== this.props.value || prevState.value !== this.state.value)) {
328
+ let nextValue = String(this.props.value ?? "").toUpperCase(), isFocused = this.input === document.activeElement;
329
+ this.setState(isFocused ? { blurValue: nextValue } : {
330
+ value: nextValue,
331
+ blurValue: this.state.blurValue ? "" : nextValue
332
+ });
333
+ }
334
+ }
335
+ componentWillUnmount() {
336
+ this.unbindEventListeners();
337
+ }
338
+ setInputRef = (input) => {
339
+ this.input = input;
340
+ };
341
+ getValueObjectWithLabel = (value) => ({ [this.props.label]: String(value) });
342
+ getArrowOffset = () => this.props.arrowOffset ?? 1;
343
+ setUpdatedValue = (value, event) => {
344
+ this.props.onChange?.(this.getValueObjectWithLabel(value), event), this.setState({ value: String(value) });
345
+ };
346
+ handleBlur = () => {
347
+ this.state.blurValue && this.setState({
348
+ value: this.state.blurValue,
349
+ blurValue: ""
350
+ });
351
+ };
352
+ handleChange = (event) => {
353
+ this.setUpdatedValue(event.target.value, event);
354
+ };
355
+ handleKeyDown = (event) => {
356
+ let value = getNumberValue(event.currentTarget.value), isUp = event.key === "ArrowUp", isDown = event.key === "ArrowDown";
357
+ if (!Number.isNaN(value) && (isUp || isDown)) {
358
+ let offset = this.getArrowOffset(), updatedValue = isUp ? value + offset : value - offset;
359
+ this.setUpdatedValue(updatedValue, event);
360
+ }
361
+ };
362
+ handleDrag = (event) => {
363
+ if (!this.props.dragLabel) return;
364
+ let { dragMax, value } = this.props, numericValue = typeof value == "number" ? value : Number(value), newValue = Math.round(numericValue + event.movementX);
365
+ dragMax !== void 0 && newValue >= 0 && newValue <= dragMax && this.props.onChange?.(this.getValueObjectWithLabel(newValue), event);
366
+ };
367
+ handleMouseDown = (event) => {
368
+ this.props.dragLabel && (event.preventDefault(), this.handleDrag(event.nativeEvent), window.addEventListener("mousemove", this.handleDrag), window.addEventListener("mouseup", this.handleMouseUp));
369
+ };
370
+ handleMouseUp = () => {
371
+ this.unbindEventListeners();
372
+ };
373
+ unbindEventListeners = () => {
374
+ window.removeEventListener("mousemove", this.handleDrag), window.removeEventListener("mouseup", this.handleMouseUp);
375
+ };
376
+ render() {
377
+ let style = this.props.style ?? {}, wrapStyle = {
378
+ position: "relative",
379
+ ...style.wrap
380
+ }, inputStyle = { ...style.input }, labelStyle = {
381
+ ...style.label,
382
+ ...this.props.dragLabel ? { cursor: "ew-resize" } : null
383
+ };
384
+ return /* @__PURE__ */ jsxs("div", {
385
+ style: wrapStyle,
386
+ children: [/* @__PURE__ */ jsx("input", {
387
+ id: this.inputId,
388
+ style: inputStyle,
389
+ ref: this.setInputRef,
390
+ value: this.state.value,
391
+ onKeyDown: this.handleKeyDown,
392
+ onChange: this.handleChange,
393
+ onBlur: this.handleBlur,
394
+ placeholder: this.props.placeholder,
395
+ spellCheck: "false"
396
+ }), this.props.label && !this.props.hideLabel ? /* @__PURE__ */ jsx("label", {
397
+ htmlFor: this.inputId,
398
+ style: labelStyle,
399
+ onMouseDown: this.handleMouseDown,
400
+ children: this.props.label
401
+ }) : null]
402
+ });
403
+ }
404
+ };
359
405
  function calculateChange$1(e, direction, hsl, container) {
360
- const containerWidth = container.clientWidth, containerHeight = container.clientHeight, x = "touches" in e ? e.touches[0]?.pageX ?? 0 : e.pageX, y = "touches" in e ? e.touches[0]?.pageY ?? 0 : e.pageY, left = x - (container.getBoundingClientRect().left + window.scrollX), top = y - (container.getBoundingClientRect().top + window.scrollY);
361
- if (direction === "vertical") {
362
- let h2;
363
- return top < 0 ? h2 = 359 : top > containerHeight ? h2 = 0 : h2 = 360 * (-(top * 100 / containerHeight) + 100) / 100, hsl.h !== h2 ? {
364
- h: h2,
365
- s: hsl.s,
366
- l: hsl.l,
367
- a: hsl.a ?? 1,
368
- source: "hsl"
369
- } : null;
370
- }
371
- let h;
372
- return left < 0 ? h = 0 : left > containerWidth ? h = 359 : h = 360 * (left * 100 / containerWidth) / 100, hsl.h !== h ? {
373
- h,
374
- s: hsl.s,
375
- l: hsl.l,
376
- a: hsl.a ?? 1,
377
- source: "hsl"
378
- } : null;
379
- }
380
- const HueGradient = /* @__PURE__ */ styled.div.withConfig({
381
- displayName: "HueGradient",
382
- componentId: "sc-9dykdk-0"
383
- })(["background:", ";"], ({
384
- $direction
385
- }) => $direction === "vertical" ? "linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)" : "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)");
386
- class Hue extends Component {
387
- container = null;
388
- componentWillUnmount() {
389
- this.unbindEventListeners();
390
- }
391
- setContainerRef = (node) => {
392
- this.container = node;
393
- };
394
- handleChange = (event) => {
395
- if (!this.container)
396
- return;
397
- const change = calculateChange$1(event, this.props.direction, this.props.hsl, this.container);
398
- change && typeof this.props.onChange == "function" && this.props.onChange(change);
399
- };
400
- handleMouseDown = (event) => {
401
- this.handleChange(event.nativeEvent), window.addEventListener("mousemove", this.handleChange), window.addEventListener("mouseup", this.handleMouseUp);
402
- };
403
- handleMouseUp = () => {
404
- this.unbindEventListeners();
405
- };
406
- unbindEventListeners = () => {
407
- window.removeEventListener("mousemove", this.handleChange), window.removeEventListener("mouseup", this.handleMouseUp);
408
- };
409
- render() {
410
- const {
411
- hsl,
412
- direction = "horizontal",
413
- radius,
414
- shadow
415
- } = this.props, pointerStyle = direction === "vertical" ? {
416
- position: "absolute",
417
- left: "0px",
418
- top: `${-(hsl.h * 100 / 360) + 100}%`
419
- } : {
420
- position: "absolute",
421
- left: `${hsl.h * 100 / 360}%`
422
- };
423
- return /* @__PURE__ */ jsx("div", { style: {
424
- position: "absolute",
425
- inset: 0,
426
- borderRadius: radius,
427
- boxShadow: shadow
428
- }, children: /* @__PURE__ */ jsx(HueGradient, { $direction: direction, style: {
429
- padding: "0 2px",
430
- position: "relative",
431
- height: "100%",
432
- borderRadius: radius
433
- }, ref: this.setContainerRef, onMouseDown: this.handleMouseDown, onTouchMove: this.handleChange, onTouchStart: this.handleChange, children: /* @__PURE__ */ jsx("div", { style: pointerStyle, children: /* @__PURE__ */ jsx("div", { style: {
434
- marginTop: "1px",
435
- width: "4px",
436
- borderRadius: "1px",
437
- height: "8px",
438
- boxShadow: "0 0 2px rgba(0, 0, 0, .6)",
439
- background: "#fff",
440
- transform: "translateX(-2px)"
441
- } }) }) }) });
442
- }
406
+ let containerWidth = container.clientWidth, containerHeight = container.clientHeight, x = "touches" in e ? e.touches[0]?.pageX ?? 0 : e.pageX, y = "touches" in e ? e.touches[0]?.pageY ?? 0 : e.pageY, left = x - (container.getBoundingClientRect().left + window.scrollX), top = y - (container.getBoundingClientRect().top + window.scrollY);
407
+ if (direction === "vertical") {
408
+ let h;
409
+ return h = top < 0 ? 359 : top > containerHeight ? 0 : 360 * (-(top * 100 / containerHeight) + 100) / 100, hsl.h === h ? null : {
410
+ h,
411
+ s: hsl.s,
412
+ l: hsl.l,
413
+ a: hsl.a ?? 1,
414
+ source: "hsl"
415
+ };
416
+ }
417
+ let h;
418
+ return h = left < 0 ? 0 : left > containerWidth ? 359 : 360 * (left * 100 / containerWidth) / 100, hsl.h === h ? null : {
419
+ h,
420
+ s: hsl.s,
421
+ l: hsl.l,
422
+ a: hsl.a ?? 1,
423
+ source: "hsl"
424
+ };
443
425
  }
426
+ /**
427
+ * Hue slider.
428
+ *
429
+ * Forked from
430
+ * {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/Hue.js | react-color's Hue}
431
+ * (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
432
+ *
433
+ * @remarks
434
+ * Kept as a class component for this round (function-component conversion is a
435
+ * follow-up PR). The upstream raw `<style>` tag holding the static hue gradient
436
+ * has been replaced with a `styled-components` element, and `reactcss` removed.
437
+ */
438
+ const HueGradient = styled.div.withConfig({
439
+ displayName: "HueGradient",
440
+ componentId: "sc-kldwsm-0"
441
+ })`background:${({ $direction }) => $direction === "vertical" ? "linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)" : "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)"};`;
442
+ var Hue = class extends Component {
443
+ container = null;
444
+ componentWillUnmount() {
445
+ this.unbindEventListeners();
446
+ }
447
+ setContainerRef = (node) => {
448
+ this.container = node;
449
+ };
450
+ handleChange = (event) => {
451
+ if (!this.container) return;
452
+ let change = calculateChange$1(event, this.props.direction, this.props.hsl, this.container);
453
+ change && typeof this.props.onChange == "function" && this.props.onChange(change);
454
+ };
455
+ handleMouseDown = (event) => {
456
+ this.handleChange(event.nativeEvent), window.addEventListener("mousemove", this.handleChange), window.addEventListener("mouseup", this.handleMouseUp);
457
+ };
458
+ handleMouseUp = () => {
459
+ this.unbindEventListeners();
460
+ };
461
+ unbindEventListeners = () => {
462
+ window.removeEventListener("mousemove", this.handleChange), window.removeEventListener("mouseup", this.handleMouseUp);
463
+ };
464
+ render() {
465
+ let { hsl, direction = "horizontal", radius, shadow } = this.props, pointerStyle = direction === "vertical" ? {
466
+ position: "absolute",
467
+ left: "0px",
468
+ top: `${-(hsl.h * 100 / 360) + 100}%`
469
+ } : {
470
+ position: "absolute",
471
+ left: `${hsl.h * 100 / 360}%`
472
+ };
473
+ return /* @__PURE__ */ jsx("div", {
474
+ style: {
475
+ position: "absolute",
476
+ inset: 0,
477
+ borderRadius: radius,
478
+ boxShadow: shadow
479
+ },
480
+ children: /* @__PURE__ */ jsx(HueGradient, {
481
+ $direction: direction,
482
+ style: {
483
+ padding: "0 2px",
484
+ position: "relative",
485
+ height: "100%",
486
+ borderRadius: radius
487
+ },
488
+ ref: this.setContainerRef,
489
+ onMouseDown: this.handleMouseDown,
490
+ onTouchMove: this.handleChange,
491
+ onTouchStart: this.handleChange,
492
+ children: /* @__PURE__ */ jsx("div", {
493
+ style: pointerStyle,
494
+ children: /* @__PURE__ */ jsx("div", { style: {
495
+ marginTop: "1px",
496
+ width: "4px",
497
+ borderRadius: "1px",
498
+ height: "8px",
499
+ boxShadow: "0 0 2px rgba(0, 0, 0, .6)",
500
+ background: "#fff",
501
+ transform: "translateX(-2px)"
502
+ } })
503
+ })
504
+ })
505
+ });
506
+ }
507
+ };
444
508
  function calculateChange(e, hsl, container) {
445
- const {
446
- width: containerWidth,
447
- height: containerHeight
448
- } = container.getBoundingClientRect(), x = "touches" in e ? e.touches[0]?.pageX ?? 0 : e.pageX, y = "touches" in e ? e.touches[0]?.pageY ?? 0 : e.pageY;
449
- let left = x - (container.getBoundingClientRect().left + window.scrollX), top = y - (container.getBoundingClientRect().top + window.scrollY);
450
- left < 0 ? left = 0 : left > containerWidth && (left = containerWidth), top < 0 ? top = 0 : top > containerHeight && (top = containerHeight);
451
- const saturation = left / containerWidth, bright = 1 - top / containerHeight;
452
- return {
453
- h: hsl.h,
454
- s: saturation,
455
- v: bright,
456
- a: hsl.a ?? 1,
457
- source: "hsv"
458
- };
459
- }
460
- const SaturationWhite = /* @__PURE__ */ styled.div.withConfig({
461
- displayName: "SaturationWhite",
462
- componentId: "sc-21ffrq-0"
463
- })(["background:linear-gradient(to right,#fff,rgba(255,255,255,0));"]), SaturationBlack = /* @__PURE__ */ styled.div.withConfig({
464
- displayName: "SaturationBlack",
465
- componentId: "sc-21ffrq-1"
466
- })(["background:linear-gradient(to top,#000,rgba(0,0,0,0));"]);
467
- class Saturation extends Component {
468
- container = null;
469
- throttle = throttle((handler, data) => {
470
- handler(data);
471
- }, 50);
472
- componentWillUnmount() {
473
- this.throttle.cancel(), this.unbindEventListeners();
474
- }
475
- setContainerRef = (node) => {
476
- this.container = node;
477
- };
478
- getContainerRenderWindow() {
479
- const {
480
- container
481
- } = this;
482
- let renderWindow = window;
483
- for (; !renderWindow.document.contains(container) && renderWindow.parent !== renderWindow; )
484
- renderWindow = renderWindow.parent;
485
- return renderWindow;
486
- }
487
- handleChange = (event) => {
488
- !this.container || typeof this.props.onChange != "function" || this.throttle(this.props.onChange, calculateChange(event, this.props.hsl, this.container));
489
- };
490
- handleMouseDown = (event) => {
491
- this.handleChange(event.nativeEvent);
492
- const renderWindow = this.getContainerRenderWindow();
493
- renderWindow.addEventListener("mousemove", this.handleChange), renderWindow.addEventListener("mouseup", this.handleMouseUp);
494
- };
495
- handleMouseUp = () => {
496
- this.unbindEventListeners();
497
- };
498
- unbindEventListeners = () => {
499
- const renderWindow = this.getContainerRenderWindow();
500
- renderWindow.removeEventListener("mousemove", this.handleChange), renderWindow.removeEventListener("mouseup", this.handleMouseUp);
501
- };
502
- render() {
503
- const {
504
- hsl,
505
- hsv,
506
- radius,
507
- shadow
508
- } = this.props, pointerStyle = {
509
- position: "absolute",
510
- top: `${-(hsv.v * 100) + 100}%`,
511
- left: `${hsv.s * 100}%`,
512
- cursor: "default"
513
- };
514
- return (
515
- // oxlint-disable-next-line jsx-a11y/no-static-element-interactions -- the picker surface is dragged via pointer coordinates, which have no keyboard equivalent
516
- /* @__PURE__ */ jsx("div", { style: {
517
- position: "absolute",
518
- inset: 0,
519
- background: `hsl(${hsl.h},100%, 50%)`,
520
- borderRadius: radius
521
- }, ref: this.setContainerRef, onMouseDown: this.handleMouseDown, onTouchMove: this.handleChange, onTouchStart: this.handleChange, children: /* @__PURE__ */ jsxs(SaturationWhite, { style: {
522
- position: "absolute",
523
- inset: 0,
524
- borderRadius: radius
525
- }, children: [
526
- /* @__PURE__ */ jsx(SaturationBlack, { style: {
527
- position: "absolute",
528
- inset: 0,
529
- boxShadow: shadow,
530
- borderRadius: radius
531
- } }),
532
- /* @__PURE__ */ jsx("div", { style: pointerStyle, children: /* @__PURE__ */ jsx("div", { style: {
533
- width: "4px",
534
- height: "4px",
535
- boxShadow: "0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4)",
536
- borderRadius: "50%",
537
- cursor: "pointer",
538
- transform: "translate(-2px, -2px)"
539
- } }) })
540
- ] }) })
541
- );
542
- }
509
+ let { width: containerWidth, height: containerHeight } = container.getBoundingClientRect(), x = "touches" in e ? e.touches[0]?.pageX ?? 0 : e.pageX, y = "touches" in e ? e.touches[0]?.pageY ?? 0 : e.pageY, left = x - (container.getBoundingClientRect().left + window.scrollX), top = y - (container.getBoundingClientRect().top + window.scrollY);
510
+ left < 0 ? left = 0 : left > containerWidth && (left = containerWidth), top < 0 ? top = 0 : top > containerHeight && (top = containerHeight);
511
+ let saturation = left / containerWidth, bright = 1 - top / containerHeight;
512
+ return {
513
+ h: hsl.h,
514
+ s: saturation,
515
+ v: bright,
516
+ a: hsl.a ?? 1,
517
+ source: "hsv"
518
+ };
543
519
  }
520
+ /**
521
+ * Saturation / value box.
522
+ *
523
+ * Forked from
524
+ * {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/Saturation.js | react-color's Saturation}
525
+ * (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
526
+ *
527
+ * @remarks
528
+ * Kept as a class component for this round (function-component conversion is a
529
+ * follow-up PR). The upstream raw `<style>` tag holding the static white/black
530
+ * gradients has been replaced with `styled-components` elements, `reactcss`
531
+ * removed, and `lodash` swapped for `lodash-es`.
532
+ */
533
+ const SaturationWhite = styled.div.withConfig({
534
+ displayName: "SaturationWhite",
535
+ componentId: "sc-0wl7vo-0"
536
+ })`background:linear-gradient(to right,#fff,rgba(255,255,255,0));`, SaturationBlack = styled.div.withConfig({
537
+ displayName: "SaturationBlack",
538
+ componentId: "sc-0wl7vo-1"
539
+ })`background:linear-gradient(to top,#000,rgba(0,0,0,0));`;
540
+ var Saturation = class extends Component {
541
+ container = null;
542
+ throttle = throttle((handler, data) => {
543
+ handler(data);
544
+ }, 50);
545
+ componentWillUnmount() {
546
+ this.throttle.cancel(), this.unbindEventListeners();
547
+ }
548
+ setContainerRef = (node) => {
549
+ this.container = node;
550
+ };
551
+ getContainerRenderWindow() {
552
+ let { container } = this, renderWindow = window;
553
+ for (; !renderWindow.document.contains(container) && renderWindow.parent !== renderWindow;) renderWindow = renderWindow.parent;
554
+ return renderWindow;
555
+ }
556
+ handleChange = (event) => {
557
+ !this.container || typeof this.props.onChange != "function" || this.throttle(this.props.onChange, calculateChange(event, this.props.hsl, this.container));
558
+ };
559
+ handleMouseDown = (event) => {
560
+ this.handleChange(event.nativeEvent);
561
+ let renderWindow = this.getContainerRenderWindow();
562
+ renderWindow.addEventListener("mousemove", this.handleChange), renderWindow.addEventListener("mouseup", this.handleMouseUp);
563
+ };
564
+ handleMouseUp = () => {
565
+ this.unbindEventListeners();
566
+ };
567
+ unbindEventListeners = () => {
568
+ let renderWindow = this.getContainerRenderWindow();
569
+ renderWindow.removeEventListener("mousemove", this.handleChange), renderWindow.removeEventListener("mouseup", this.handleMouseUp);
570
+ };
571
+ render() {
572
+ let { hsl, hsv, radius, shadow } = this.props, pointerStyle = {
573
+ position: "absolute",
574
+ top: `${-(hsv.v * 100) + 100}%`,
575
+ left: `${hsv.s * 100}%`,
576
+ cursor: "default"
577
+ };
578
+ return /* @__PURE__ */ jsx("div", {
579
+ style: {
580
+ position: "absolute",
581
+ inset: 0,
582
+ background: `hsl(${hsl.h},100%, 50%)`,
583
+ borderRadius: radius
584
+ },
585
+ ref: this.setContainerRef,
586
+ onMouseDown: this.handleMouseDown,
587
+ onTouchMove: this.handleChange,
588
+ onTouchStart: this.handleChange,
589
+ children: /* @__PURE__ */ jsxs(SaturationWhite, {
590
+ style: {
591
+ position: "absolute",
592
+ inset: 0,
593
+ borderRadius: radius
594
+ },
595
+ children: [/* @__PURE__ */ jsx(SaturationBlack, { style: {
596
+ position: "absolute",
597
+ inset: 0,
598
+ boxShadow: shadow,
599
+ borderRadius: radius
600
+ } }), /* @__PURE__ */ jsx("div", {
601
+ style: pointerStyle,
602
+ children: /* @__PURE__ */ jsx("div", { style: {
603
+ width: "4px",
604
+ height: "4px",
605
+ boxShadow: "0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4)",
606
+ borderRadius: "50%",
607
+ cursor: "pointer",
608
+ transform: "translate(-2px, -2px)"
609
+ } })
610
+ })]
611
+ })
612
+ });
613
+ }
614
+ };
544
615
  const ColorPickerFields = (t0) => {
545
- const $ = c(44), {
546
- onChange,
547
- rgb,
548
- hsl,
549
- hex,
550
- disableAlpha
551
- } = t0, {
552
- sanity
553
- } = useTheme(), t1 = `inset 0 0 0 1px ${sanity.color.input.default.enabled.border}`, t2 = sanity.fonts.text.sizes[0]?.fontSize;
554
- let t3;
555
- $[0] !== sanity.color.input.default.enabled.bg || $[1] !== sanity.color.input.default.enabled.fg || $[2] !== t1 || $[3] !== t2 ? (t3 = {
556
- width: "80%",
557
- padding: "4px 10% 3px",
558
- border: "none",
559
- boxShadow: t1,
560
- color: sanity.color.input.default.enabled.fg,
561
- backgroundColor: sanity.color.input.default.enabled.bg,
562
- fontSize: t2,
563
- textAlign: "center"
564
- }, $[0] = sanity.color.input.default.enabled.bg, $[1] = sanity.color.input.default.enabled.fg, $[2] = t1, $[3] = t2, $[4] = t3) : t3 = $[4];
565
- const t4 = sanity.fonts.label.sizes[0]?.fontSize;
566
- let t5;
567
- $[5] !== sanity.color.base.fg || $[6] !== t4 ? (t5 = {
568
- display: "block",
569
- textAlign: "center",
570
- fontSize: t4,
571
- color: sanity.color.base.fg,
572
- paddingTop: "3px",
573
- paddingBottom: "4px",
574
- textTransform: "capitalize"
575
- }, $[5] = sanity.color.base.fg, $[6] = t4, $[7] = t5) : t5 = $[7];
576
- let t6;
577
- $[8] !== t3 || $[9] !== t5 ? (t6 = {
578
- input: t3,
579
- label: t5
580
- }, $[8] = t3, $[9] = t5, $[10] = t6) : t6 = $[10];
581
- const inputStyles = t6;
582
- let t7;
583
- $[11] !== hsl || $[12] !== onChange || $[13] !== rgb ? (t7 = (data) => {
584
- if ("hex" in data && data.hex && isValidHex(data.hex))
585
- onChange({
586
- hex: data.hex,
587
- source: "hex"
588
- });
589
- else if (rgb && ("r" in data && data.r || "g" in data && data.g || "b" in data && data.b))
590
- onChange({
591
- r: Number(data.r) || rgb.r,
592
- g: Number(data.g) || rgb.g,
593
- b: Number(data.b) || rgb.b,
594
- a: rgb.a,
595
- source: "rgb"
596
- });
597
- else if (hsl && "a" in data && data.a) {
598
- let alpha = Number(data.a);
599
- alpha < 0 ? alpha = 0 : alpha > 100 && (alpha = 100), alpha = alpha / 100, onChange({
600
- h: hsl.h,
601
- s: hsl.s,
602
- l: hsl.l,
603
- a: alpha,
604
- source: "hsl"
605
- });
606
- }
607
- }, $[11] = hsl, $[12] = onChange, $[13] = rgb, $[14] = t7) : t7 = $[14];
608
- const handleChange = t7;
609
- let t8;
610
- $[15] !== hex ? (t8 = hex?.replace("#", ""), $[15] = hex, $[16] = t8) : t8 = $[16];
611
- let t9;
612
- $[17] !== handleChange || $[18] !== inputStyles || $[19] !== t8 ? (t9 = /* @__PURE__ */ jsx(Box, { flex: 2, marginRight: 1, children: /* @__PURE__ */ jsx(EditableInput, { style: inputStyles, label: "hex", value: t8, onChange: handleChange }) }), $[17] = handleChange, $[18] = inputStyles, $[19] = t8, $[20] = t9) : t9 = $[20];
613
- const t10 = rgb?.r;
614
- let t11;
615
- $[21] !== handleChange || $[22] !== inputStyles || $[23] !== t10 ? (t11 = /* @__PURE__ */ jsx(Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsx(EditableInput, { style: inputStyles, label: "r", value: t10, onChange: handleChange, dragLabel: !0, dragMax: 255 }) }), $[21] = handleChange, $[22] = inputStyles, $[23] = t10, $[24] = t11) : t11 = $[24];
616
- const t12 = rgb?.g;
617
- let t13;
618
- $[25] !== handleChange || $[26] !== inputStyles || $[27] !== t12 ? (t13 = /* @__PURE__ */ jsx(Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsx(EditableInput, { style: inputStyles, label: "g", value: t12, onChange: handleChange, dragLabel: !0, dragMax: 255 }) }), $[25] = handleChange, $[26] = inputStyles, $[27] = t12, $[28] = t13) : t13 = $[28];
619
- const t14 = rgb?.b;
620
- let t15;
621
- $[29] !== handleChange || $[30] !== inputStyles || $[31] !== t14 ? (t15 = /* @__PURE__ */ jsx(Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsx(EditableInput, { style: inputStyles, label: "b", value: t14, onChange: handleChange, dragLabel: !0, dragMax: 255 }) }), $[29] = handleChange, $[30] = inputStyles, $[31] = t14, $[32] = t15) : t15 = $[32];
622
- let t16;
623
- $[33] !== disableAlpha || $[34] !== handleChange || $[35] !== inputStyles || $[36] !== rgb?.a ? (t16 = !disableAlpha && /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(EditableInput, { style: inputStyles, label: "a", value: Math.round((rgb?.a ?? 1) * 100), onChange: handleChange, dragLabel: !0, dragMax: 100 }) }), $[33] = disableAlpha, $[34] = handleChange, $[35] = inputStyles, $[36] = rgb?.a, $[37] = t16) : t16 = $[37];
624
- let t17;
625
- return $[38] !== t11 || $[39] !== t13 || $[40] !== t15 || $[41] !== t16 || $[42] !== t9 ? (t17 = /* @__PURE__ */ jsxs(Flex, { children: [
626
- t9,
627
- t11,
628
- t13,
629
- t15,
630
- t16
631
- ] }), $[38] = t11, $[39] = t13, $[40] = t15, $[41] = t16, $[42] = t9, $[43] = t17) : t17 = $[43], t17;
632
- }, ColorBox = /* @__PURE__ */ styled(Box).withConfig({
633
- displayName: "ColorBox",
634
- componentId: "sc-13q7kbw-0"
635
- })(["position:absolute;top:0;left:0;width:100%;height:100%;"]), ReadOnlyContainer = /* @__PURE__ */ styled(Flex).withConfig({
636
- displayName: "ReadOnlyContainer",
637
- componentId: "sc-13q7kbw-1"
638
- })(["margin-top:6rem;background-color:var(--card-bg-color);position:relative;width:100%;"]), ColorPickerInner = (props) => {
639
- const $ = c(46), {
640
- width,
641
- color: t0,
642
- onChange,
643
- onUnset,
644
- disableAlpha,
645
- colorList,
646
- readOnly
647
- } = props, {
648
- rgb,
649
- hex,
650
- hsv,
651
- hsl
652
- } = t0;
653
- if (!hsl || !hsv)
654
- return null;
655
- let t1;
656
- $[0] !== width ? (t1 = {
657
- width
658
- }, $[0] = width, $[1] = t1) : t1 = $[1];
659
- let t2;
660
- $[2] !== disableAlpha || $[3] !== hsl || $[4] !== hsv || $[5] !== onChange || $[6] !== readOnly || $[7] !== rgb ? (t2 = !readOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
661
- /* @__PURE__ */ jsx(Card, { overflow: "hidden", style: {
662
- position: "relative",
663
- height: "5em"
664
- }, children: /* @__PURE__ */ jsx(Saturation, { onChange, hsl, hsv }) }),
665
- /* @__PURE__ */ jsx(Card, { shadow: 1, radius: 3, overflow: "hidden", style: {
666
- position: "relative",
667
- height: "10px"
668
- }, children: /* @__PURE__ */ jsx(Hue, { hsl, onChange: !readOnly && onChange }) }),
669
- !disableAlpha && /* @__PURE__ */ jsx(Card, { shadow: 1, radius: 3, overflow: "hidden", style: {
670
- position: "relative",
671
- height: "10px",
672
- background: "#fff"
673
- }, children: /* @__PURE__ */ jsx(Alpha, { rgb, hsl, onChange }) })
674
- ] }), $[2] = disableAlpha, $[3] = hsl, $[4] = hsv, $[5] = onChange, $[6] = readOnly, $[7] = rgb, $[8] = t2) : t2 = $[8];
675
- let t3, t4;
676
- $[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t3 = {
677
- position: "relative",
678
- minWidth: "4em",
679
- background: "#fff"
680
- }, t4 = /* @__PURE__ */ jsx(Checkboard, { size: 8, white: "transparent", grey: "rgba(0,0,0,.08)" }), $[9] = t3, $[10] = t4) : (t3 = $[9], t4 = $[10]);
681
- const t5 = `rgba(${rgb?.r},${rgb?.g},${rgb?.b},${rgb?.a})`;
682
- let t6;
683
- $[11] !== t5 ? (t6 = /* @__PURE__ */ jsx(ColorBox, { style: {
684
- backgroundColor: t5
685
- } }), $[11] = t5, $[12] = t6) : t6 = $[12];
686
- let t7;
687
- $[13] !== hex || $[14] !== hsl?.h || $[15] !== hsl?.l || $[16] !== hsl?.s || $[17] !== readOnly || $[18] !== rgb?.b || $[19] !== rgb?.g || $[20] !== rgb?.r ? (t7 = readOnly && /* @__PURE__ */ jsx(ReadOnlyContainer, { padding: 2, paddingBottom: 1, sizing: "border", justify: "space-between", children: /* @__PURE__ */ jsxs(Stack, { gap: 3, marginTop: 1, children: [
688
- /* @__PURE__ */ jsx(Text, { size: 3, weight: "bold", children: hex }),
689
- /* @__PURE__ */ jsxs(Inline, { gap: 3, children: [
690
- /* @__PURE__ */ jsxs(Text, { size: 1, children: [
691
- /* @__PURE__ */ jsx("strong", { children: "RGB: " }),
692
- rgb?.r,
693
- " ",
694
- rgb?.g,
695
- " ",
696
- rgb?.b
697
- ] }),
698
- /* @__PURE__ */ jsxs(Text, { size: 1, children: [
699
- /* @__PURE__ */ jsx("strong", { children: "HSL: " }),
700
- " ",
701
- Math.round(hsl?.h ?? 0),
702
- " ",
703
- Math.round((hsl?.s ?? 0) * 100),
704
- "% ",
705
- Math.round((hsl?.l ?? 0) * 100),
706
- "%"
707
- ] })
708
- ] })
709
- ] }) }), $[13] = hex, $[14] = hsl?.h, $[15] = hsl?.l, $[16] = hsl?.s, $[17] = readOnly, $[18] = rgb?.b, $[19] = rgb?.g, $[20] = rgb?.r, $[21] = t7) : t7 = $[21];
710
- let t8;
711
- $[22] !== t6 || $[23] !== t7 ? (t8 = /* @__PURE__ */ jsxs(Card, { flex: 1, radius: 2, overflow: "hidden", style: t3, children: [
712
- t4,
713
- t6,
714
- t7
715
- ] }), $[22] = t6, $[23] = t7, $[24] = t8) : t8 = $[24];
716
- let t9;
717
- $[25] !== disableAlpha || $[26] !== hex || $[27] !== hsl || $[28] !== onChange || $[29] !== onUnset || $[30] !== readOnly || $[31] !== rgb ? (t9 = !readOnly && /* @__PURE__ */ jsxs(Flex, { align: "flex-start", marginLeft: 2, children: [
718
- /* @__PURE__ */ jsx(Box, { style: {
719
- width: 200
720
- }, children: /* @__PURE__ */ jsx(ColorPickerFields, { rgb, hsl, hex, onChange, disableAlpha }) }),
721
- /* @__PURE__ */ jsx(Box, { marginLeft: 2, children: /* @__PURE__ */ jsx(Button, { onClick: onUnset, title: "Delete color", icon: TrashIcon, tone: "critical" }) })
722
- ] }), $[25] = disableAlpha, $[26] = hex, $[27] = hsl, $[28] = onChange, $[29] = onUnset, $[30] = readOnly, $[31] = rgb, $[32] = t9) : t9 = $[32];
723
- let t10;
724
- $[33] !== t8 || $[34] !== t9 ? (t10 = /* @__PURE__ */ jsxs(Flex, { children: [
725
- t8,
726
- t9
727
- ] }), $[33] = t8, $[34] = t9, $[35] = t10) : t10 = $[35];
728
- let t11;
729
- $[36] !== colorList || $[37] !== onChange ? (t11 = colorList && /* @__PURE__ */ jsx(ColorList, { colors: colorList, onChange }), $[36] = colorList, $[37] = onChange, $[38] = t11) : t11 = $[38];
730
- let t12;
731
- $[39] !== t10 || $[40] !== t11 || $[41] !== t2 ? (t12 = /* @__PURE__ */ jsx(Card, { padding: 1, border: !0, radius: 1, children: /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
732
- t2,
733
- t10,
734
- t11
735
- ] }) }), $[39] = t10, $[40] = t11, $[41] = t2, $[42] = t12) : t12 = $[42];
736
- let t13;
737
- return $[43] !== t1 || $[44] !== t12 ? (t13 = /* @__PURE__ */ jsx("div", { style: t1, children: t12 }), $[43] = t1, $[44] = t12, $[45] = t13) : t13 = $[45], t13;
738
- }, ColorPicker = CustomPicker(ColorPickerInner), DEFAULT_COLOR = {
739
- hex: "#24a3e3",
740
- hsl: {
741
- h: 200,
742
- s: 0.7732,
743
- l: 0.5156,
744
- a: 1
745
- },
746
- hsv: {
747
- h: 200,
748
- s: 0.8414,
749
- v: 0.8901,
750
- a: 1
751
- },
752
- rgb: {
753
- r: 46,
754
- g: 163,
755
- b: 227,
756
- a: 1
757
- },
758
- source: "hex"
616
+ let $ = c(44), { onChange, rgb, hsl, hex, disableAlpha } = t0, { sanity } = useTheme(), t1 = `inset 0 0 0 1px ${sanity.color.input.default.enabled.border}`, t2 = sanity.fonts.text.sizes[0]?.fontSize, t3;
617
+ $[0] !== sanity.color.input.default.enabled.bg || $[1] !== sanity.color.input.default.enabled.fg || $[2] !== t1 || $[3] !== t2 ? (t3 = {
618
+ width: "80%",
619
+ padding: "4px 10% 3px",
620
+ border: "none",
621
+ boxShadow: t1,
622
+ color: sanity.color.input.default.enabled.fg,
623
+ backgroundColor: sanity.color.input.default.enabled.bg,
624
+ fontSize: t2,
625
+ textAlign: "center"
626
+ }, $[0] = sanity.color.input.default.enabled.bg, $[1] = sanity.color.input.default.enabled.fg, $[2] = t1, $[3] = t2, $[4] = t3) : t3 = $[4];
627
+ let t4 = sanity.fonts.label.sizes[0]?.fontSize, t5;
628
+ $[5] !== sanity.color.base.fg || $[6] !== t4 ? (t5 = {
629
+ display: "block",
630
+ textAlign: "center",
631
+ fontSize: t4,
632
+ color: sanity.color.base.fg,
633
+ paddingTop: "3px",
634
+ paddingBottom: "4px",
635
+ textTransform: "capitalize"
636
+ }, $[5] = sanity.color.base.fg, $[6] = t4, $[7] = t5) : t5 = $[7];
637
+ let t6;
638
+ $[8] !== t3 || $[9] !== t5 ? (t6 = {
639
+ input: t3,
640
+ label: t5
641
+ }, $[8] = t3, $[9] = t5, $[10] = t6) : t6 = $[10];
642
+ let inputStyles = t6, t7;
643
+ $[11] !== hsl || $[12] !== onChange || $[13] !== rgb ? (t7 = (data) => {
644
+ if ("hex" in data && data.hex && isValidHex(data.hex)) onChange({
645
+ hex: data.hex,
646
+ source: "hex"
647
+ });
648
+ else if (rgb && ("r" in data && data.r || "g" in data && data.g || "b" in data && data.b)) onChange({
649
+ r: Number(data.r) || rgb.r,
650
+ g: Number(data.g) || rgb.g,
651
+ b: Number(data.b) || rgb.b,
652
+ a: rgb.a,
653
+ source: "rgb"
654
+ });
655
+ else if (hsl && "a" in data && data.a) {
656
+ let alpha = Number(data.a);
657
+ alpha < 0 ? alpha = 0 : alpha > 100 && (alpha = 100), alpha /= 100, onChange({
658
+ h: hsl.h,
659
+ s: hsl.s,
660
+ l: hsl.l,
661
+ a: alpha,
662
+ source: "hsl"
663
+ });
664
+ }
665
+ }, $[11] = hsl, $[12] = onChange, $[13] = rgb, $[14] = t7) : t7 = $[14];
666
+ let handleChange = t7, t8;
667
+ $[15] === hex ? t8 = $[16] : (t8 = hex?.replace("#", ""), $[15] = hex, $[16] = t8);
668
+ let t9;
669
+ $[17] !== handleChange || $[18] !== inputStyles || $[19] !== t8 ? (t9 = /* @__PURE__ */ jsx(Box, {
670
+ flex: 2,
671
+ marginRight: 1,
672
+ children: /* @__PURE__ */ jsx(EditableInput, {
673
+ style: inputStyles,
674
+ label: "hex",
675
+ value: t8,
676
+ onChange: handleChange
677
+ })
678
+ }), $[17] = handleChange, $[18] = inputStyles, $[19] = t8, $[20] = t9) : t9 = $[20];
679
+ let t10 = rgb?.r, t11;
680
+ $[21] !== handleChange || $[22] !== inputStyles || $[23] !== t10 ? (t11 = /* @__PURE__ */ jsx(Box, {
681
+ flex: 1,
682
+ marginRight: 1,
683
+ children: /* @__PURE__ */ jsx(EditableInput, {
684
+ style: inputStyles,
685
+ label: "r",
686
+ value: t10,
687
+ onChange: handleChange,
688
+ dragLabel: !0,
689
+ dragMax: 255
690
+ })
691
+ }), $[21] = handleChange, $[22] = inputStyles, $[23] = t10, $[24] = t11) : t11 = $[24];
692
+ let t12 = rgb?.g, t13;
693
+ $[25] !== handleChange || $[26] !== inputStyles || $[27] !== t12 ? (t13 = /* @__PURE__ */ jsx(Box, {
694
+ flex: 1,
695
+ marginRight: 1,
696
+ children: /* @__PURE__ */ jsx(EditableInput, {
697
+ style: inputStyles,
698
+ label: "g",
699
+ value: t12,
700
+ onChange: handleChange,
701
+ dragLabel: !0,
702
+ dragMax: 255
703
+ })
704
+ }), $[25] = handleChange, $[26] = inputStyles, $[27] = t12, $[28] = t13) : t13 = $[28];
705
+ let t14 = rgb?.b, t15;
706
+ $[29] !== handleChange || $[30] !== inputStyles || $[31] !== t14 ? (t15 = /* @__PURE__ */ jsx(Box, {
707
+ flex: 1,
708
+ marginRight: 1,
709
+ children: /* @__PURE__ */ jsx(EditableInput, {
710
+ style: inputStyles,
711
+ label: "b",
712
+ value: t14,
713
+ onChange: handleChange,
714
+ dragLabel: !0,
715
+ dragMax: 255
716
+ })
717
+ }), $[29] = handleChange, $[30] = inputStyles, $[31] = t14, $[32] = t15) : t15 = $[32];
718
+ let t16;
719
+ $[33] !== disableAlpha || $[34] !== handleChange || $[35] !== inputStyles || $[36] !== rgb?.a ? (t16 = !disableAlpha && /* @__PURE__ */ jsx(Box, {
720
+ flex: 1,
721
+ children: /* @__PURE__ */ jsx(EditableInput, {
722
+ style: inputStyles,
723
+ label: "a",
724
+ value: Math.round((rgb?.a ?? 1) * 100),
725
+ onChange: handleChange,
726
+ dragLabel: !0,
727
+ dragMax: 100
728
+ })
729
+ }), $[33] = disableAlpha, $[34] = handleChange, $[35] = inputStyles, $[36] = rgb?.a, $[37] = t16) : t16 = $[37];
730
+ let t17;
731
+ return $[38] !== t11 || $[39] !== t13 || $[40] !== t15 || $[41] !== t16 || $[42] !== t9 ? (t17 = /* @__PURE__ */ jsxs(Flex, { children: [
732
+ t9,
733
+ t11,
734
+ t13,
735
+ t15,
736
+ t16
737
+ ] }), $[38] = t11, $[39] = t13, $[40] = t15, $[41] = t16, $[42] = t9, $[43] = t17) : t17 = $[43], t17;
738
+ }, ColorBox = styled(Box).withConfig({
739
+ displayName: "ColorBox",
740
+ componentId: "sc-pfhngk-0"
741
+ })`position:absolute;top:0;left:0;width:100%;height:100%;`, ReadOnlyContainer = styled(Flex).withConfig({
742
+ displayName: "ReadOnlyContainer",
743
+ componentId: "sc-pfhngk-1"
744
+ })`margin-top:6rem;background-color:var(--card-bg-color);position:relative;width:100%;`, ColorPicker = CustomPicker((props) => {
745
+ let $ = c(46), { width, color: t0, onChange, onUnset, disableAlpha, colorList, readOnly } = props, { rgb, hex, hsv, hsl } = t0;
746
+ if (!hsl || !hsv) return null;
747
+ let t1;
748
+ $[0] === width ? t1 = $[1] : (t1 = { width }, $[0] = width, $[1] = t1);
749
+ let t2;
750
+ $[2] !== disableAlpha || $[3] !== hsl || $[4] !== hsv || $[5] !== onChange || $[6] !== readOnly || $[7] !== rgb ? (t2 = !readOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
751
+ /* @__PURE__ */ jsx(Card, {
752
+ overflow: "hidden",
753
+ style: {
754
+ position: "relative",
755
+ height: "5em"
756
+ },
757
+ children: /* @__PURE__ */ jsx(Saturation, {
758
+ onChange,
759
+ hsl,
760
+ hsv
761
+ })
762
+ }),
763
+ /* @__PURE__ */ jsx(Card, {
764
+ shadow: 1,
765
+ radius: 3,
766
+ overflow: "hidden",
767
+ style: {
768
+ position: "relative",
769
+ height: "10px"
770
+ },
771
+ children: /* @__PURE__ */ jsx(Hue, {
772
+ hsl,
773
+ onChange: !readOnly && onChange
774
+ })
775
+ }),
776
+ !disableAlpha && /* @__PURE__ */ jsx(Card, {
777
+ shadow: 1,
778
+ radius: 3,
779
+ overflow: "hidden",
780
+ style: {
781
+ position: "relative",
782
+ height: "10px",
783
+ background: "#fff"
784
+ },
785
+ children: /* @__PURE__ */ jsx(Alpha, {
786
+ rgb,
787
+ hsl,
788
+ onChange
789
+ })
790
+ })
791
+ ] }), $[2] = disableAlpha, $[3] = hsl, $[4] = hsv, $[5] = onChange, $[6] = readOnly, $[7] = rgb, $[8] = t2) : t2 = $[8];
792
+ let t3, t4;
793
+ $[9] === Symbol.for("react.memo_cache_sentinel") ? (t3 = {
794
+ position: "relative",
795
+ minWidth: "4em",
796
+ background: "#fff"
797
+ }, t4 = /* @__PURE__ */ jsx(Checkboard, {
798
+ size: 8,
799
+ white: "transparent",
800
+ grey: "rgba(0,0,0,.08)"
801
+ }), $[9] = t3, $[10] = t4) : (t3 = $[9], t4 = $[10]);
802
+ let t5 = `rgba(${rgb?.r},${rgb?.g},${rgb?.b},${rgb?.a})`, t6;
803
+ $[11] === t5 ? t6 = $[12] : (t6 = /* @__PURE__ */ jsx(ColorBox, { style: { backgroundColor: t5 } }), $[11] = t5, $[12] = t6);
804
+ let t7;
805
+ $[13] !== hex || $[14] !== hsl?.h || $[15] !== hsl?.l || $[16] !== hsl?.s || $[17] !== readOnly || $[18] !== rgb?.b || $[19] !== rgb?.g || $[20] !== rgb?.r ? (t7 = readOnly && /* @__PURE__ */ jsx(ReadOnlyContainer, {
806
+ padding: 2,
807
+ paddingBottom: 1,
808
+ sizing: "border",
809
+ justify: "space-between",
810
+ children: /* @__PURE__ */ jsxs(Stack, {
811
+ gap: 3,
812
+ marginTop: 1,
813
+ children: [/* @__PURE__ */ jsx(Text, {
814
+ size: 3,
815
+ weight: "bold",
816
+ children: hex
817
+ }), /* @__PURE__ */ jsxs(Inline, {
818
+ gap: 3,
819
+ children: [/* @__PURE__ */ jsxs(Text, {
820
+ size: 1,
821
+ children: [
822
+ /* @__PURE__ */ jsx("strong", { children: "RGB: " }),
823
+ rgb?.r,
824
+ " ",
825
+ rgb?.g,
826
+ " ",
827
+ rgb?.b
828
+ ]
829
+ }), /* @__PURE__ */ jsxs(Text, {
830
+ size: 1,
831
+ children: [
832
+ /* @__PURE__ */ jsx("strong", { children: "HSL: " }),
833
+ " ",
834
+ Math.round(hsl?.h ?? 0),
835
+ " ",
836
+ Math.round((hsl?.s ?? 0) * 100),
837
+ "% ",
838
+ Math.round((hsl?.l ?? 0) * 100),
839
+ "%"
840
+ ]
841
+ })]
842
+ })]
843
+ })
844
+ }), $[13] = hex, $[14] = hsl?.h, $[15] = hsl?.l, $[16] = hsl?.s, $[17] = readOnly, $[18] = rgb?.b, $[19] = rgb?.g, $[20] = rgb?.r, $[21] = t7) : t7 = $[21];
845
+ let t8;
846
+ $[22] !== t6 || $[23] !== t7 ? (t8 = /* @__PURE__ */ jsxs(Card, {
847
+ flex: 1,
848
+ radius: 2,
849
+ overflow: "hidden",
850
+ style: t3,
851
+ children: [
852
+ t4,
853
+ t6,
854
+ t7
855
+ ]
856
+ }), $[22] = t6, $[23] = t7, $[24] = t8) : t8 = $[24];
857
+ let t9;
858
+ $[25] !== disableAlpha || $[26] !== hex || $[27] !== hsl || $[28] !== onChange || $[29] !== onUnset || $[30] !== readOnly || $[31] !== rgb ? (t9 = !readOnly && /* @__PURE__ */ jsxs(Flex, {
859
+ align: "flex-start",
860
+ marginLeft: 2,
861
+ children: [/* @__PURE__ */ jsx(Box, {
862
+ style: { width: 200 },
863
+ children: /* @__PURE__ */ jsx(ColorPickerFields, {
864
+ rgb,
865
+ hsl,
866
+ hex,
867
+ onChange,
868
+ disableAlpha
869
+ })
870
+ }), /* @__PURE__ */ jsx(Box, {
871
+ marginLeft: 2,
872
+ children: /* @__PURE__ */ jsx(Button, {
873
+ onClick: onUnset,
874
+ title: "Delete color",
875
+ icon: TrashIcon,
876
+ tone: "critical"
877
+ })
878
+ })]
879
+ }), $[25] = disableAlpha, $[26] = hex, $[27] = hsl, $[28] = onChange, $[29] = onUnset, $[30] = readOnly, $[31] = rgb, $[32] = t9) : t9 = $[32];
880
+ let t10;
881
+ $[33] !== t8 || $[34] !== t9 ? (t10 = /* @__PURE__ */ jsxs(Flex, { children: [t8, t9] }), $[33] = t8, $[34] = t9, $[35] = t10) : t10 = $[35];
882
+ let t11;
883
+ $[36] !== colorList || $[37] !== onChange ? (t11 = colorList && /* @__PURE__ */ jsx(ColorList, {
884
+ colors: colorList,
885
+ onChange
886
+ }), $[36] = colorList, $[37] = onChange, $[38] = t11) : t11 = $[38];
887
+ let t12;
888
+ $[39] !== t10 || $[40] !== t11 || $[41] !== t2 ? (t12 = /* @__PURE__ */ jsx(Card, {
889
+ padding: 1,
890
+ border: !0,
891
+ radius: 1,
892
+ children: /* @__PURE__ */ jsxs(Stack, {
893
+ gap: 2,
894
+ children: [
895
+ t2,
896
+ t10,
897
+ t11
898
+ ]
899
+ })
900
+ }), $[39] = t10, $[40] = t11, $[41] = t2, $[42] = t12) : t12 = $[42];
901
+ let t13;
902
+ return $[43] !== t1 || $[44] !== t12 ? (t13 = /* @__PURE__ */ jsx("div", {
903
+ style: t1,
904
+ children: t12
905
+ }), $[43] = t1, $[44] = t12, $[45] = t13) : t13 = $[45], t13;
906
+ }), DEFAULT_COLOR = {
907
+ hex: "#24a3e3",
908
+ hsl: {
909
+ h: 200,
910
+ s: .7732,
911
+ l: .5156,
912
+ a: 1
913
+ },
914
+ hsv: {
915
+ h: 200,
916
+ s: .8414,
917
+ v: .8901,
918
+ a: 1
919
+ },
920
+ rgb: {
921
+ r: 46,
922
+ g: 163,
923
+ b: 227,
924
+ a: 1
925
+ },
926
+ source: "hex"
759
927
  };
760
928
  function ColorInput(props) {
761
- const $ = c(10), {
762
- onChange,
763
- readOnly
764
- } = props, _value = props.value, [value, setColorOptimistic] = useOptimistic(_value), type = props.schemaType, focusRef = useRef(null);
765
- let t0;
766
- $[0] !== onChange || $[1] !== type ? (t0 = function(nextColor) {
767
- const fieldPatches = type.fields.filter((field) => field.name in nextColor).map((field_0) => {
768
- const nextFieldValue = nextColor[field_0.name], isObject = field_0.type.jsonType === "object";
769
- return set(isObject ? Object.assign({
770
- _type: field_0.type.name
771
- }, nextFieldValue) : nextFieldValue, [field_0.name]);
772
- });
773
- onChange([setIfMissing({
774
- _type: type.name
775
- }), set(type.name, ["_type"]), set(nextColor.rgb?.a, ["alpha"]), ...fieldPatches]);
776
- }, $[0] = onChange, $[1] = type, $[2] = t0) : t0 = $[2];
777
- const handleChange = t0;
778
- let t1;
779
- return $[3] !== handleChange || $[4] !== onChange || $[5] !== readOnly || $[6] !== setColorOptimistic || $[7] !== type || $[8] !== value ? (t1 = /* @__PURE__ */ jsx(Fragment, { children: value && value.hex ? /* @__PURE__ */ jsx(ColorPicker, { color: value, onChange: (nextColor_0) => startTransition(() => {
780
- setColorOptimistic(nextColor_0), handleChange(nextColor_0);
781
- }), readOnly: readOnly || typeof type.readOnly == "boolean" && type.readOnly, disableAlpha: !!type.options?.disableAlpha, colorList: type.options?.colorList, onUnset: () => startTransition(() => {
782
- setColorOptimistic(void 0), onChange(unset());
783
- }) }) : /* @__PURE__ */ jsx(Button, { icon: AddIcon, mode: "ghost", text: "Create color", ref: focusRef, disabled: !!readOnly, onClick: () => startTransition(() => {
784
- setColorOptimistic(DEFAULT_COLOR), handleChange(DEFAULT_COLOR);
785
- }) }) }), $[3] = handleChange, $[4] = onChange, $[5] = readOnly, $[6] = setColorOptimistic, $[7] = type, $[8] = value, $[9] = t1) : t1 = $[9], t1;
929
+ let $ = c(10), { onChange, readOnly } = props, _value = props.value, [value, setColorOptimistic] = useOptimistic(_value), type = props.schemaType, focusRef = useRef(null), t0;
930
+ $[0] !== onChange || $[1] !== type ? (t0 = function(nextColor) {
931
+ let fieldPatches = type.fields.filter((field) => field.name in nextColor).map((field_0) => {
932
+ let nextFieldValue = nextColor[field_0.name];
933
+ return set(field_0.type.jsonType === "object" ? Object.assign({ _type: field_0.type.name }, nextFieldValue) : nextFieldValue, [field_0.name]);
934
+ });
935
+ onChange([
936
+ setIfMissing({ _type: type.name }),
937
+ set(type.name, ["_type"]),
938
+ set(nextColor.rgb?.a, ["alpha"]),
939
+ ...fieldPatches
940
+ ]);
941
+ }, $[0] = onChange, $[1] = type, $[2] = t0) : t0 = $[2];
942
+ let handleChange = t0, t1;
943
+ return $[3] !== handleChange || $[4] !== onChange || $[5] !== readOnly || $[6] !== setColorOptimistic || $[7] !== type || $[8] !== value ? (t1 = /* @__PURE__ */ jsx(Fragment, { children: value && value.hex ? /* @__PURE__ */ jsx(ColorPicker, {
944
+ color: value,
945
+ onChange: (nextColor_0) => startTransition(() => {
946
+ setColorOptimistic(nextColor_0), handleChange(nextColor_0);
947
+ }),
948
+ readOnly: readOnly || typeof type.readOnly == "boolean" && type.readOnly,
949
+ disableAlpha: !!type.options?.disableAlpha,
950
+ colorList: type.options?.colorList,
951
+ onUnset: () => startTransition(() => {
952
+ setColorOptimistic(void 0), onChange(unset());
953
+ })
954
+ }) : /* @__PURE__ */ jsx(Button, {
955
+ icon: AddIcon,
956
+ mode: "ghost",
957
+ text: "Create color",
958
+ ref: focusRef,
959
+ disabled: !!readOnly,
960
+ onClick: () => startTransition(() => {
961
+ setColorOptimistic(DEFAULT_COLOR), handleChange(DEFAULT_COLOR);
962
+ })
963
+ }) }), $[3] = handleChange, $[4] = onChange, $[5] = readOnly, $[6] = setColorOptimistic, $[7] = type, $[8] = value, $[9] = t1) : t1 = $[9], t1;
786
964
  }
787
- export {
788
- ColorInput as default
789
- };
790
- //# sourceMappingURL=ColorInput.js.map
965
+ export { ColorInput as default };
966
+
967
+ //# sourceMappingURL=ColorInput.js.map