@sanity/color-input 4.0.7 → 5.0.1

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 (13) hide show
  1. package/LICENSE +1 -1
  2. package/dist/_chunks-es/ColorInput.js +276 -280
  3. package/dist/_chunks-es/ColorInput.js.map +1 -1
  4. package/dist/index.d.ts +5 -4
  5. package/dist/index.d.ts.map +1 -0
  6. package/dist/index.js +84 -60
  7. package/dist/index.js.map +1 -1
  8. package/package.json +16 -22
  9. package/dist/_chunks-cjs/ColorInput.cjs +0 -337
  10. package/dist/_chunks-cjs/ColorInput.cjs.map +0 -1
  11. package/dist/index.cjs +0 -114
  12. package/dist/index.cjs.map +0 -1
  13. package/dist/index.d.cts +0 -64
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2025 Sanity
3
+ Copyright (c) 2025 Sanity.io
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/dist/_chunks-es/ColorInput.js CHANGED
@@ -1,12 +1,13 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
- import { memo, useMemo, useCallback, useRef, useState, useEffect, startTransition, useDeferredValue } from "react";
2
+ import { c } from "react-compiler-runtime";
3
+ import { AddIcon, TrashIcon } from "@sanity/icons";
4
+ import { Flex, useTheme, Box, Button, Card, Stack, Text, Inline } from "@sanity/ui";
5
+ import { useRef, useState, useEffect, useDeferredValue, startTransition } from "react";
3
6
  import { CustomPicker } from "react-color";
4
7
  import { EditableInput, Saturation, Hue, Alpha, Checkboard } from "react-color/lib/components/common";
5
8
  import { set, setIfMissing, unset } from "sanity";
6
9
  import { styled } from "styled-components";
7
10
  import { useEffectEvent } from "use-effect-event";
8
- import { AddIcon, TrashIcon } from "@sanity/icons";
9
- import { Flex, useTheme, Box, Button, Card, Stack, Text, Inline } from "@sanity/ui";
10
11
  import tinycolor from "tinycolor2";
11
12
  import { isValidHex } from "react-color/lib/helpers/color";
12
13
  const ColorListWrap = styled(Flex)`
@@ -27,136 +28,127 @@ const ColorListWrap = styled(Flex)`
27
28
  position: absolute;
28
29
  inset: 0;
29
30
  z-index: 1;
30
- `, validateColors = (colors) => colors.reduce((cls, c) => {
31
- const color = c.hex ? tinycolor(c.hex) : tinycolor(c);
31
+ `, validateColors = (colors) => colors.reduce((cls, c2) => {
32
+ const color = c2.hex ? tinycolor(c2.hex) : tinycolor(c2);
32
33
  return color.isValid() && cls.push({
33
- color: c,
34
+ color: c2,
34
35
  backgroundColor: color.toRgbString()
35
36
  }), cls;
36
- }, []), ColorList = memo(function({ colors, onChange }) {
37
- return colors ? /* @__PURE__ */ jsx(ColorListWrap, { wrap: "wrap", children: validateColors(colors).map(({ color, backgroundColor }, idx) => /* @__PURE__ */ jsx(
38
- ColorBoxContainer,
39
- {
40
- onClick: () => {
37
+ }, []);
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, idx) => {
49
+ const {
50
+ color,
51
+ backgroundColor
52
+ } = t3;
53
+ return /* @__PURE__ */ jsx(ColorBoxContainer, { onClick: () => {
41
54
  onChange(color);
42
- },
43
- children: /* @__PURE__ */ jsx(ColorBox$1, { style: { background: backgroundColor } })
44
- },
45
- `${backgroundColor}-${idx}`
46
- )) }) : null;
47
- }), ColorPickerFields = ({
48
- onChange,
49
- rgb,
50
- hsl,
51
- hex,
52
- disableAlpha
53
- }) => {
54
- const { sanity } = useTheme(), inputStyles = useMemo(
55
- () => ({
56
- input: {
57
- width: "80%",
58
- padding: "4px 10% 3px",
59
- border: "none",
60
- boxShadow: `inset 0 0 0 1px ${sanity.color.input.default.enabled.border}`,
61
- color: sanity.color.input.default.enabled.fg,
62
- backgroundColor: sanity.color.input.default.enabled.bg,
63
- fontSize: sanity.fonts.text.sizes[0]?.fontSize,
64
- textAlign: "center"
65
- },
66
- label: {
67
- display: "block",
68
- textAlign: "center",
69
- fontSize: sanity.fonts.label.sizes[0]?.fontSize,
70
- color: sanity.color.base.fg,
71
- paddingTop: "3px",
72
- paddingBottom: "4px",
73
- textTransform: "capitalize"
74
- }
75
- }),
76
- [sanity]
77
- ), handleChange = useCallback(
78
- (data) => {
79
- if ("hex" in data && data.hex && isValidHex(data.hex))
80
- onChange({
81
- hex: data.hex,
82
- source: "hex"
83
- });
84
- else if (rgb && ("r" in data && data.r || "g" in data && data.g || "b" in data && data.b))
85
- onChange({
86
- r: Number(data.r) || rgb.r,
87
- g: Number(data.g) || rgb.g,
88
- b: Number(data.b) || rgb.b,
89
- a: rgb.a,
90
- source: "rgb"
91
- });
92
- else if (hsl && "a" in data && data.a) {
93
- let alpha = Number(data.a);
94
- alpha < 0 ? alpha = 0 : alpha > 100 && (alpha = 100), alpha /= 100, onChange({
95
- h: hsl.h,
96
- s: hsl.s,
97
- l: hsl.l,
98
- a: alpha,
99
- source: "hsl"
100
- });
101
- }
102
- },
103
- [onChange, hsl, rgb]
104
- );
105
- return /* @__PURE__ */ jsxs(Flex, { children: [
106
- /* @__PURE__ */ jsx(Box, { flex: 2, marginRight: 1, children: /* @__PURE__ */ jsx(
107
- EditableInput,
108
- {
109
- style: inputStyles,
110
- label: "hex",
111
- value: hex?.replace("#", ""),
112
- onChange: handleChange
113
- }
114
- ) }),
115
- /* @__PURE__ */ jsx(Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsx(
116
- EditableInput,
117
- {
118
- style: inputStyles,
119
- label: "r",
120
- value: rgb?.r,
121
- onChange: handleChange,
122
- dragLabel: !0,
123
- dragMax: 255
124
- }
125
- ) }),
126
- /* @__PURE__ */ jsx(Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsx(
127
- EditableInput,
128
- {
129
- style: inputStyles,
130
- label: "g",
131
- value: rgb?.g,
132
- onChange: handleChange,
133
- dragLabel: !0,
134
- dragMax: 255
135
- }
136
- ) }),
137
- /* @__PURE__ */ jsx(Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsx(
138
- EditableInput,
139
- {
140
- style: inputStyles,
141
- label: "b",
142
- value: rgb?.b,
143
- onChange: handleChange,
144
- dragLabel: !0,
145
- dragMax: 255
146
- }
147
- ) }),
148
- !disableAlpha && /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(
149
- EditableInput,
150
- {
151
- style: inputStyles,
152
- label: "a",
153
- value: Math.round((rgb?.a ?? 1) * 100),
154
- onChange: handleChange,
155
- dragLabel: !0,
156
- dragMax: 100
157
- }
158
- ) })
159
- ] });
55
+ }, children: /* @__PURE__ */ jsx(ColorBox$1, { style: {
56
+ background: backgroundColor
57
+ } }) }, `${backgroundColor}-${idx}`);
58
+ }, $[3] = onChange, $[4] = t22) : t22 = $[4], t1 = validateColors(colors).map(t22), $[0] = colors, $[1] = onChange, $[2] = t1;
59
+ } else
60
+ t1 = $[2];
61
+ let t2;
62
+ return $[5] !== t1 ? (t2 = /* @__PURE__ */ jsx(ColorListWrap, { wrap: "wrap", children: t1 }), $[5] = t1, $[6] = t2) : t2 = $[6], t2;
63
+ }
64
+ const ColorPickerFields = (t0) => {
65
+ const $ = c(44), {
66
+ onChange,
67
+ rgb,
68
+ hsl,
69
+ hex,
70
+ disableAlpha
71
+ } = t0, {
72
+ sanity
73
+ } = useTheme(), t1 = `inset 0 0 0 1px ${sanity.color.input.default.enabled.border}`, t2 = sanity.fonts.text.sizes[0]?.fontSize;
74
+ let t3;
75
+ $[0] !== sanity.color.input.default.enabled.bg || $[1] !== sanity.color.input.default.enabled.fg || $[2] !== t1 || $[3] !== t2 ? (t3 = {
76
+ width: "80%",
77
+ padding: "4px 10% 3px",
78
+ border: "none",
79
+ boxShadow: t1,
80
+ color: sanity.color.input.default.enabled.fg,
81
+ backgroundColor: sanity.color.input.default.enabled.bg,
82
+ fontSize: t2,
83
+ textAlign: "center"
84
+ }, $[0] = sanity.color.input.default.enabled.bg, $[1] = sanity.color.input.default.enabled.fg, $[2] = t1, $[3] = t2, $[4] = t3) : t3 = $[4];
85
+ const t4 = sanity.fonts.label.sizes[0]?.fontSize;
86
+ let t5;
87
+ $[5] !== sanity.color.base.fg || $[6] !== t4 ? (t5 = {
88
+ display: "block",
89
+ textAlign: "center",
90
+ fontSize: t4,
91
+ color: sanity.color.base.fg,
92
+ paddingTop: "3px",
93
+ paddingBottom: "4px",
94
+ textTransform: "capitalize"
95
+ }, $[5] = sanity.color.base.fg, $[6] = t4, $[7] = t5) : t5 = $[7];
96
+ let t6;
97
+ $[8] !== t3 || $[9] !== t5 ? (t6 = {
98
+ input: t3,
99
+ label: t5
100
+ }, $[8] = t3, $[9] = t5, $[10] = t6) : t6 = $[10];
101
+ const inputStyles = t6;
102
+ let t7;
103
+ $[11] !== hsl || $[12] !== onChange || $[13] !== rgb ? (t7 = (data) => {
104
+ if ("hex" in data && data.hex && isValidHex(data.hex))
105
+ onChange({
106
+ hex: data.hex,
107
+ source: "hex"
108
+ });
109
+ else if (rgb && ("r" in data && data.r || "g" in data && data.g || "b" in data && data.b))
110
+ onChange({
111
+ r: Number(data.r) || rgb.r,
112
+ g: Number(data.g) || rgb.g,
113
+ b: Number(data.b) || rgb.b,
114
+ a: rgb.a,
115
+ source: "rgb"
116
+ });
117
+ else if (hsl && "a" in data && data.a) {
118
+ let alpha = Number(data.a);
119
+ alpha < 0 ? alpha = 0 : alpha > 100 && (alpha = 100), alpha = alpha / 100, onChange({
120
+ h: hsl.h,
121
+ s: hsl.s,
122
+ l: hsl.l,
123
+ a: alpha,
124
+ source: "hsl"
125
+ });
126
+ }
127
+ }, $[11] = hsl, $[12] = onChange, $[13] = rgb, $[14] = t7) : t7 = $[14];
128
+ const handleChange = t7;
129
+ let t8;
130
+ $[15] !== hex ? (t8 = hex?.replace("#", ""), $[15] = hex, $[16] = t8) : t8 = $[16];
131
+ let t9;
132
+ $[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];
133
+ const t10 = rgb?.r;
134
+ let t11;
135
+ $[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];
136
+ const t12 = rgb?.g;
137
+ let t13;
138
+ $[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];
139
+ const t14 = rgb?.b;
140
+ let t15;
141
+ $[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];
142
+ let t16;
143
+ $[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];
144
+ let t17;
145
+ return $[38] !== t11 || $[39] !== t13 || $[40] !== t15 || $[41] !== t16 || $[42] !== t9 ? (t17 = /* @__PURE__ */ jsxs(Flex, { children: [
146
+ t9,
147
+ t11,
148
+ t13,
149
+ t15,
150
+ t16
151
+ ] }), $[38] = t11, $[39] = t13, $[40] = t15, $[41] = t16, $[42] = t9, $[43] = t17) : t17 = $[43], t17;
160
152
  }, ColorBox = styled(Box)`
161
153
  position: absolute;
162
154
  top: 0;
@@ -169,174 +161,178 @@ const ColorListWrap = styled(Flex)`
169
161
  position: relative;
170
162
  width: 100%;
171
163
  `, ColorPickerInner = (props) => {
172
- const {
164
+ const $ = c(47), {
173
165
  width,
174
- color: { rgb, hex, hsv, hsl },
166
+ color: t0,
175
167
  onChange,
176
168
  onUnset,
177
169
  disableAlpha,
178
170
  colorList,
179
171
  readOnly
180
- } = props;
181
- return !hsl || !hsv ? null : /* @__PURE__ */ jsx("div", { style: { width }, children: /* @__PURE__ */ jsx(Card, { padding: 1, border: !0, radius: 1, children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
182
- !readOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
183
- /* @__PURE__ */ jsx(Card, { overflow: "hidden", style: { position: "relative", height: "5em" }, children: /* @__PURE__ */ jsx(Saturation, { onChange, hsl, hsv }) }),
184
- /* @__PURE__ */ jsx(
185
- Card,
186
- {
187
- shadow: 1,
188
- radius: 3,
189
- overflow: "hidden",
190
- style: { position: "relative", height: "10px" },
191
- children: /* @__PURE__ */ jsx(Hue, { hsl, onChange: !readOnly && onChange })
192
- }
193
- ),
194
- !disableAlpha && /* @__PURE__ */ jsx(
195
- Card,
196
- {
197
- shadow: 1,
198
- radius: 3,
199
- overflow: "hidden",
200
- style: { position: "relative", height: "10px", background: "#fff" },
201
- children: /* @__PURE__ */ jsx(Alpha, { rgb, hsl, onChange })
202
- }
203
- )
204
- ] }),
205
- /* @__PURE__ */ jsxs(Flex, { children: [
206
- /* @__PURE__ */ jsxs(
207
- Card,
208
- {
209
- flex: 1,
210
- radius: 2,
211
- overflow: "hidden",
212
- style: { position: "relative", minWidth: "4em", background: "#fff" },
213
- children: [
214
- /* @__PURE__ */ jsx(
215
- Checkboard,
216
- {
217
- size: 8,
218
- white: "transparent",
219
- grey: "rgba(0,0,0,.08)",
220
- renderers: {}
221
- }
222
- ),
223
- /* @__PURE__ */ jsx(
224
- ColorBox,
225
- {
226
- style: {
227
- backgroundColor: `rgba(${rgb?.r},${rgb?.g},${rgb?.b},${rgb?.a})`
228
- }
229
- }
230
- ),
231
- readOnly && /* @__PURE__ */ jsx(
232
- ReadOnlyContainer,
233
- {
234
- padding: 2,
235
- paddingBottom: 1,
236
- sizing: "border",
237
- justify: "space-between",
238
- children: /* @__PURE__ */ jsxs(Stack, { space: 3, marginTop: 1, children: [
239
- /* @__PURE__ */ jsx(Text, { size: 3, weight: "bold", children: hex }),
240
- /* @__PURE__ */ jsxs(Inline, { space: 3, children: [
241
- /* @__PURE__ */ jsxs(Text, { size: 1, children: [
242
- /* @__PURE__ */ jsx("strong", { children: "RGB: " }),
243
- rgb?.r,
244
- " ",
245
- rgb?.g,
246
- " ",
247
- rgb?.b
248
- ] }),
249
- /* @__PURE__ */ jsxs(Text, { size: 1, children: [
250
- /* @__PURE__ */ jsx("strong", { children: "HSL: " }),
251
- " ",
252
- Math.round(hsl?.h ?? 0),
253
- " ",
254
- Math.round((hsl?.s ?? 0) * 100),
255
- "% ",
256
- Math.round((hsl?.l ?? 0) * 100),
257
- "%"
258
- ] })
259
- ] })
260
- ] })
261
- }
262
- )
263
- ]
264
- }
265
- ),
266
- !readOnly && /* @__PURE__ */ jsxs(Flex, { align: "flex-start", marginLeft: 2, children: [
267
- /* @__PURE__ */ jsx(Box, { style: { width: 200 }, children: /* @__PURE__ */ jsx(
268
- ColorPickerFields,
269
- {
270
- rgb,
271
- hsl,
272
- hex,
273
- onChange,
274
- disableAlpha
275
- }
276
- ) }),
277
- /* @__PURE__ */ jsx(Box, { marginLeft: 2, children: /* @__PURE__ */ jsx(Button, { onClick: onUnset, title: "Delete color", icon: TrashIcon, tone: "critical" }) })
172
+ } = props, {
173
+ rgb,
174
+ hex,
175
+ hsv,
176
+ hsl
177
+ } = t0;
178
+ if (!hsl || !hsv)
179
+ return null;
180
+ let t1;
181
+ $[0] !== width ? (t1 = {
182
+ width
183
+ }, $[0] = width, $[1] = t1) : t1 = $[1];
184
+ let t2;
185
+ $[2] !== disableAlpha || $[3] !== hsl || $[4] !== hsv || $[5] !== onChange || $[6] !== readOnly || $[7] !== rgb ? (t2 = !readOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
186
+ /* @__PURE__ */ jsx(Card, { overflow: "hidden", style: {
187
+ position: "relative",
188
+ height: "5em"
189
+ }, children: /* @__PURE__ */ jsx(Saturation, { onChange, hsl, hsv }) }),
190
+ /* @__PURE__ */ jsx(Card, { shadow: 1, radius: 3, overflow: "hidden", style: {
191
+ position: "relative",
192
+ height: "10px"
193
+ }, children: /* @__PURE__ */ jsx(Hue, { hsl, onChange: !readOnly && onChange }) }),
194
+ !disableAlpha && /* @__PURE__ */ jsx(Card, { shadow: 1, radius: 3, overflow: "hidden", style: {
195
+ position: "relative",
196
+ height: "10px",
197
+ background: "#fff"
198
+ }, children: /* @__PURE__ */ jsx(Alpha, { rgb, hsl, onChange }) })
199
+ ] }), $[2] = disableAlpha, $[3] = hsl, $[4] = hsv, $[5] = onChange, $[6] = readOnly, $[7] = rgb, $[8] = t2) : t2 = $[8];
200
+ let t3;
201
+ $[9] === Symbol.for("react.memo_cache_sentinel") ? (t3 = {
202
+ position: "relative",
203
+ minWidth: "4em",
204
+ background: "#fff"
205
+ }, $[9] = t3) : t3 = $[9];
206
+ let t4;
207
+ $[10] === Symbol.for("react.memo_cache_sentinel") ? (t4 = {}, $[10] = t4) : t4 = $[10];
208
+ let t5;
209
+ $[11] === Symbol.for("react.memo_cache_sentinel") ? (t5 = /* @__PURE__ */ jsx(Checkboard, { size: 8, white: "transparent", grey: "rgba(0,0,0,.08)", renderers: t4 }), $[11] = t5) : t5 = $[11];
210
+ const t6 = `rgba(${rgb?.r},${rgb?.g},${rgb?.b},${rgb?.a})`;
211
+ let t7;
212
+ $[12] !== t6 ? (t7 = /* @__PURE__ */ jsx(ColorBox, { style: {
213
+ backgroundColor: t6
214
+ } }), $[12] = t6, $[13] = t7) : t7 = $[13];
215
+ let t8;
216
+ $[14] !== hex || $[15] !== hsl?.h || $[16] !== hsl?.l || $[17] !== hsl?.s || $[18] !== readOnly || $[19] !== rgb?.b || $[20] !== rgb?.g || $[21] !== rgb?.r ? (t8 = readOnly && /* @__PURE__ */ jsx(ReadOnlyContainer, { padding: 2, paddingBottom: 1, sizing: "border", justify: "space-between", children: /* @__PURE__ */ jsxs(Stack, { space: 3, marginTop: 1, children: [
217
+ /* @__PURE__ */ jsx(Text, { size: 3, weight: "bold", children: hex }),
218
+ /* @__PURE__ */ jsxs(Inline, { space: 3, children: [
219
+ /* @__PURE__ */ jsxs(Text, { size: 1, children: [
220
+ /* @__PURE__ */ jsx("strong", { children: "RGB: " }),
221
+ rgb?.r,
222
+ " ",
223
+ rgb?.g,
224
+ " ",
225
+ rgb?.b
226
+ ] }),
227
+ /* @__PURE__ */ jsxs(Text, { size: 1, children: [
228
+ /* @__PURE__ */ jsx("strong", { children: "HSL: " }),
229
+ " ",
230
+ Math.round(hsl?.h ?? 0),
231
+ " ",
232
+ Math.round((hsl?.s ?? 0) * 100),
233
+ "% ",
234
+ Math.round((hsl?.l ?? 0) * 100),
235
+ "%"
278
236
  ] })
279
- ] }),
280
- colorList && /* @__PURE__ */ jsx(ColorList, { colors: colorList, onChange })
281
- ] }) }) });
237
+ ] })
238
+ ] }) }), $[14] = hex, $[15] = hsl?.h, $[16] = hsl?.l, $[17] = hsl?.s, $[18] = readOnly, $[19] = rgb?.b, $[20] = rgb?.g, $[21] = rgb?.r, $[22] = t8) : t8 = $[22];
239
+ let t9;
240
+ $[23] !== t7 || $[24] !== t8 ? (t9 = /* @__PURE__ */ jsxs(Card, { flex: 1, radius: 2, overflow: "hidden", style: t3, children: [
241
+ t5,
242
+ t7,
243
+ t8
244
+ ] }), $[23] = t7, $[24] = t8, $[25] = t9) : t9 = $[25];
245
+ let t10;
246
+ $[26] !== disableAlpha || $[27] !== hex || $[28] !== hsl || $[29] !== onChange || $[30] !== onUnset || $[31] !== readOnly || $[32] !== rgb ? (t10 = !readOnly && /* @__PURE__ */ jsxs(Flex, { align: "flex-start", marginLeft: 2, children: [
247
+ /* @__PURE__ */ jsx(Box, { style: {
248
+ width: 200
249
+ }, children: /* @__PURE__ */ jsx(ColorPickerFields, { rgb, hsl, hex, onChange, disableAlpha }) }),
250
+ /* @__PURE__ */ jsx(Box, { marginLeft: 2, children: /* @__PURE__ */ jsx(Button, { onClick: onUnset, title: "Delete color", icon: TrashIcon, tone: "critical" }) })
251
+ ] }), $[26] = disableAlpha, $[27] = hex, $[28] = hsl, $[29] = onChange, $[30] = onUnset, $[31] = readOnly, $[32] = rgb, $[33] = t10) : t10 = $[33];
252
+ let t11;
253
+ $[34] !== t10 || $[35] !== t9 ? (t11 = /* @__PURE__ */ jsxs(Flex, { children: [
254
+ t9,
255
+ t10
256
+ ] }), $[34] = t10, $[35] = t9, $[36] = t11) : t11 = $[36];
257
+ let t12;
258
+ $[37] !== colorList || $[38] !== onChange ? (t12 = colorList && /* @__PURE__ */ jsx(ColorList, { colors: colorList, onChange }), $[37] = colorList, $[38] = onChange, $[39] = t12) : t12 = $[39];
259
+ let t13;
260
+ $[40] !== t11 || $[41] !== t12 || $[42] !== t2 ? (t13 = /* @__PURE__ */ jsx(Card, { padding: 1, border: !0, radius: 1, children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
261
+ t2,
262
+ t11,
263
+ t12
264
+ ] }) }), $[40] = t11, $[41] = t12, $[42] = t2, $[43] = t13) : t13 = $[43];
265
+ let t14;
266
+ return $[44] !== t1 || $[45] !== t13 ? (t14 = /* @__PURE__ */ jsx("div", { style: t1, children: t13 }), $[44] = t1, $[45] = t13, $[46] = t14) : t14 = $[46], t14;
282
267
  }, ColorPicker = CustomPicker(ColorPickerInner), DEFAULT_COLOR = {
283
268
  hex: "#24a3e3",
284
- hsl: { h: 200, s: 0.7732, l: 0.5156, a: 1 },
285
- hsv: { h: 200, s: 0.8414, v: 0.8901, a: 1 },
286
- rgb: { r: 46, g: 163, b: 227, a: 1 },
269
+ hsl: {
270
+ h: 200,
271
+ s: 0.7732,
272
+ l: 0.5156,
273
+ a: 1
274
+ },
275
+ hsv: {
276
+ h: 200,
277
+ s: 0.8414,
278
+ v: 0.8901,
279
+ a: 1
280
+ },
281
+ rgb: {
282
+ r: 46,
283
+ g: 163,
284
+ b: 227,
285
+ a: 1
286
+ },
287
287
  source: "hex"
288
288
  };
289
289
  function ColorInput(props) {
290
- const { onChange, readOnly } = props, value = props.value, type = props.schemaType, focusRef = useRef(null), [color, setColor] = useState(value);
291
- useEffect(() => startTransition(() => setColor(value)), [value]);
292
- const [emitColor, setEmitColor] = useState(void 0), debouncedColor = useDeferredValue(emitColor), handleChange = useEffectEvent((nextColor) => {
293
- const fieldPatches = type.fields.filter((field) => field.name in nextColor).map((field) => {
294
- const nextFieldValue = nextColor[field.name], isObject = field.type.jsonType === "object";
295
- return set(
296
- isObject ? Object.assign({ _type: field.type.name }, nextFieldValue) : nextFieldValue,
297
- [field.name]
298
- );
290
+ const $ = c(24), {
291
+ onChange,
292
+ readOnly
293
+ } = props, value = props.value, type = props.schemaType, focusRef = useRef(null), [color, setColor] = useState(value);
294
+ let t0, t1;
295
+ $[0] !== value ? (t0 = () => startTransition(() => setColor(value)), t1 = [value], $[0] = value, $[1] = t0, $[2] = t1) : (t0 = $[1], t1 = $[2]), useEffect(t0, t1);
296
+ const [emitColor, setEmitColor] = useState(void 0), debouncedColor = useDeferredValue(emitColor);
297
+ let t2;
298
+ $[3] !== onChange || $[4] !== type.fields || $[5] !== type.name ? (t2 = (nextColor) => {
299
+ const fieldPatches = type.fields.filter((field) => field.name in nextColor).map((field_0) => {
300
+ const nextFieldValue = nextColor[field_0.name], isObject = field_0.type.jsonType === "object";
301
+ return set(isObject ? Object.assign({
302
+ _type: field_0.type.name
303
+ }, nextFieldValue) : nextFieldValue, [field_0.name]);
299
304
  });
300
- onChange([
301
- setIfMissing({ _type: type.name }),
302
- set(type.name, ["_type"]),
303
- set(nextColor.rgb?.a, ["alpha"]),
304
- ...fieldPatches
305
- ]);
306
- });
307
- useEffect(() => {
308
- if (!debouncedColor) return;
305
+ onChange([setIfMissing({
306
+ _type: type.name
307
+ }), set(type.name, ["_type"]), set(nextColor.rgb?.a, ["alpha"]), ...fieldPatches]);
308
+ }, $[3] = onChange, $[4] = type.fields, $[5] = type.name, $[6] = t2) : t2 = $[6];
309
+ const handleChange = useEffectEvent(t2);
310
+ let t3;
311
+ $[7] !== debouncedColor || $[8] !== handleChange ? (t3 = () => {
312
+ if (!debouncedColor)
313
+ return;
309
314
  const raf = requestAnimationFrame(() => handleChange(debouncedColor));
310
315
  return () => cancelAnimationFrame(raf);
311
- }, [debouncedColor]);
312
- const handleCreateColor = useCallback(() => {
316
+ }, $[7] = debouncedColor, $[8] = handleChange, $[9] = t3) : t3 = $[9];
317
+ let t4;
318
+ $[10] !== debouncedColor ? (t4 = [debouncedColor], $[10] = debouncedColor, $[11] = t4) : t4 = $[11], useEffect(t3, t4);
319
+ let t5;
320
+ $[12] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => {
313
321
  setColor(DEFAULT_COLOR), setEmitColor(DEFAULT_COLOR);
314
- }, []), handleColorChange = useCallback((nextColor) => {
315
- setColor(nextColor), setEmitColor(nextColor);
316
- }, []), handleUnset = useCallback(() => {
322
+ }, $[12] = t5) : t5 = $[12];
323
+ const handleCreateColor = t5;
324
+ let t6;
325
+ $[13] === Symbol.for("react.memo_cache_sentinel") ? (t6 = (nextColor_0) => {
326
+ setColor(nextColor_0), setEmitColor(nextColor_0);
327
+ }, $[13] = t6) : t6 = $[13];
328
+ const handleColorChange = t6;
329
+ let t7;
330
+ $[14] !== onChange ? (t7 = () => {
317
331
  setColor(void 0), onChange(unset());
318
- }, [onChange]);
319
- return /* @__PURE__ */ jsx(Fragment, { children: value && value.hex ? /* @__PURE__ */ jsx(
320
- ColorPicker,
321
- {
322
- color,
323
- onChange: handleColorChange,
324
- readOnly: readOnly || typeof type.readOnly == "boolean" && type.readOnly,
325
- disableAlpha: !!type.options?.disableAlpha,
326
- colorList: type.options?.colorList,
327
- onUnset: handleUnset
328
- }
329
- ) : /* @__PURE__ */ jsx(
330
- Button,
331
- {
332
- icon: AddIcon,
333
- mode: "ghost",
334
- text: "Create color",
335
- ref: focusRef,
336
- disabled: !!readOnly,
337
- onClick: handleCreateColor
338
- }
339
- ) });
332
+ }, $[14] = onChange, $[15] = t7) : t7 = $[15];
333
+ const handleUnset = t7;
334
+ let t8;
335
+ return $[16] !== color || $[17] !== handleUnset || $[18] !== readOnly || $[19] !== type.options?.colorList || $[20] !== type.options?.disableAlpha || $[21] !== type.readOnly || $[22] !== value ? (t8 = /* @__PURE__ */ jsx(Fragment, { children: value && value.hex ? /* @__PURE__ */ jsx(ColorPicker, { color, onChange: handleColorChange, readOnly: readOnly || typeof type.readOnly == "boolean" && type.readOnly, disableAlpha: !!type.options?.disableAlpha, colorList: type.options?.colorList, onUnset: handleUnset }) : /* @__PURE__ */ jsx(Button, { icon: AddIcon, mode: "ghost", text: "Create color", ref: focusRef, disabled: !!readOnly, onClick: handleCreateColor }) }), $[16] = color, $[17] = handleUnset, $[18] = readOnly, $[19] = type.options?.colorList, $[20] = type.options?.disableAlpha, $[21] = type.readOnly, $[22] = value, $[23] = t8) : t8 = $[23], t8;
340
336
  }
341
337
  export {
342
338
  ColorInput as default