@sanity/color-input
6.0.126.0.13
dist/_chunks-es/ColorInput.js+
dist/_chunks-es/ColorInput.jsNew file+967
Index: package/dist/_chunks-es/ColorInput.js
===================================================================
--- package/dist/_chunks-es/ColorInput.js
+++ package/dist/_chunks-es/ColorInput.js
@@ -0,0 +1,967 @@
+import { set, setIfMissing, unset } from "sanity";
+import { Component, PureComponent, startTransition, useOptimistic, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { AddIcon } from "@sanity/icons/Add";
+import { TrashIcon } from "@sanity/icons/Trash";
+import { Box, Button, Card, Flex, Inline, Stack, Text, useTheme } from "@sanity/ui";
+import { styled } from "styled-components";
+import tinycolor from "tinycolor2";
+import throttle from "lodash-es/throttle.js";
+const ColorListWrap = styled(Flex).withConfig({
+ displayName: "ColorListWrap",
+ componentId: "sc-fcjsbz-0"
+})`gap:0.25em;`, ColorBoxContainer = styled.div.withConfig({
+ displayName: "ColorBoxContainer",
+ componentId: "sc-fcjsbz-1"
+})`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({
+ displayName: "ColorBox",
+ componentId: "sc-fcjsbz-2"
+})`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) => {
+ let seen = /* @__PURE__ */ new Set();
+ return colors.reduce((cls, c) => {
+ let color = c.hex ? tinycolor(c.hex) : tinycolor(c);
+ if (color.isValid()) {
+ let backgroundColor = color.toRgbString(), key = JSON.stringify({
+ color: c,
+ backgroundColor
+ });
+ seen.has(key) || (seen.add(key), cls.push({
+ key,
+ color: c,
+ backgroundColor
+ }));
+ }
+ return cls;
+ }, []);
+};
+function ColorList(t0) {
+ let $ = c(7), { colors, onChange } = t0;
+ if (!colors) return null;
+ let t1;
+ if ($[0] !== colors || $[1] !== onChange) {
+ let t2;
+ $[3] === onChange ? t2 = $[4] : (t2 = (t3) => {
+ let { key, color, backgroundColor } = t3;
+ return /* @__PURE__ */ jsx(ColorBoxContainer, {
+ onClick: () => {
+ onChange(color);
+ },
+ children: /* @__PURE__ */ jsx(ColorBox$1, { style: { background: backgroundColor } })
+ }, key);
+ }, $[3] = onChange, $[4] = t2), t1 = validateColors(colors).map(t2), $[0] = colors, $[1] = onChange, $[2] = t1;
+ } else t1 = $[2];
+ let t2;
+ return $[5] === t1 ? t2 = $[6] : (t2 = /* @__PURE__ */ jsx(ColorListWrap, {
+ wrap: "wrap",
+ children: t1
+ }), $[5] = t1, $[6] = t2), t2;
+}
+/**
+* Renders a checkerboard pattern as a data URL, used as the transparency backdrop.
+*
+* Forked from
+* {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/helpers/checkboard.js | react-color's checkboard helper}
+* (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
+*/
+const checkboardCache = {};
+function render(c1, c2, size, serverCanvas) {
+ if (typeof document > "u" && !serverCanvas) return null;
+ let canvas = serverCanvas ? new serverCanvas() : document.createElement("canvas");
+ canvas.width = size * 2, canvas.height = size * 2;
+ let ctx = canvas.getContext("2d");
+ 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;
+}
+function get(c1, c2, size, serverCanvas) {
+ let key = `${c1}-${c2}-${size}${serverCanvas ? "-server" : ""}`, cached = checkboardCache[key];
+ if (cached) return cached;
+ let checkboard = render(c1, c2, size, serverCanvas);
+ return checkboardCache[key] = checkboard, checkboard;
+}
+const EMPTY_RENDERERS = {};
+function Checkboard(t0) {
+ 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;
+ $[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];
+ let background = t5, t6 = background ? `url(${background}) center left` : void 0, t7;
+ return $[5] !== borderRadius || $[6] !== boxShadow || $[7] !== t6 ? (t7 = /* @__PURE__ */ jsx("div", { style: {
+ borderRadius,
+ boxShadow,
+ position: "absolute",
+ inset: 0,
+ background: t6
+ } }), $[5] = borderRadius, $[6] = boxShadow, $[7] = t6, $[8] = t7) : t7 = $[8], t7;
+}
+function calculateChange$2(e, hsl, direction, initialA, container) {
+ 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);
+ if (direction === "vertical") {
+ let a;
+ return a = top < 0 ? 0 : top > containerHeight ? 1 : Math.round(top * 100 / containerHeight) / 100, hsl.a === a ? null : {
+ h: hsl.h,
+ s: hsl.s,
+ l: hsl.l,
+ a,
+ source: "rgb"
+ };
+ }
+ let a;
+ return a = left < 0 ? 0 : left > containerWidth ? 1 : Math.round(left * 100 / containerWidth) / 100, initialA === a ? null : {
+ h: hsl.h,
+ s: hsl.s,
+ l: hsl.l,
+ a,
+ source: "rgb"
+ };
+}
+/**
+* Alpha (transparency) slider.
+*
+* Forked from
+* {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/Alpha.js | react-color's Alpha}
+* (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
+*
+* @remarks
+* Kept as a class component for this round (function-component conversion is a
+* follow-up PR). `reactcss` has been removed in favor of plain inline styles,
+* and the unused custom `pointer` slot dropped.
+*/
+var Alpha = class extends Component {
+ container = null;
+ componentWillUnmount() {
+ this.unbindEventListeners();
+ }
+ setContainerRef = (node) => {
+ this.container = node;
+ };
+ handleChange = (event) => {
+ if (!this.container) return;
+ let change = calculateChange$2(event, this.props.hsl, this.props.direction, this.props.a, this.container);
+ change && typeof this.props.onChange == "function" && this.props.onChange(change);
+ };
+ handleMouseDown = (event) => {
+ this.handleChange(event.nativeEvent), window.addEventListener("mousemove", this.handleChange), window.addEventListener("mouseup", this.handleMouseUp);
+ };
+ handleMouseUp = () => {
+ this.unbindEventListeners();
+ };
+ unbindEventListeners = () => {
+ window.removeEventListener("mousemove", this.handleChange), window.removeEventListener("mouseup", this.handleMouseUp);
+ };
+ render() {
+ 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" ? {
+ position: "absolute",
+ left: 0,
+ top: `${alphaValue * 100}%`
+ } : {
+ position: "absolute",
+ left: `${alphaValue * 100}%`
+ };
+ return /* @__PURE__ */ jsxs("div", {
+ style: {
+ position: "absolute",
+ inset: 0,
+ borderRadius: radius
+ },
+ children: [
+ /* @__PURE__ */ jsx("div", {
+ style: {
+ position: "absolute",
+ inset: 0,
+ overflow: "hidden",
+ borderRadius: radius
+ },
+ children: /* @__PURE__ */ jsx(Checkboard, { renderers })
+ }),
+ /* @__PURE__ */ jsx("div", { style: {
+ position: "absolute",
+ inset: 0,
+ background: gradient,
+ boxShadow: shadow,
+ borderRadius: radius
+ } }),
+ /* @__PURE__ */ jsx("div", {
+ style: {
+ position: "relative",
+ height: "100%",
+ margin: "0 3px"
+ },
+ ref: this.setContainerRef,
+ onMouseDown: this.handleMouseDown,
+ onTouchMove: this.handleChange,
+ onTouchStart: this.handleChange,
+ children: /* @__PURE__ */ jsx("div", {
+ style: pointerStyle,
+ children: /* @__PURE__ */ jsx("div", { style: {
+ width: "4px",
+ borderRadius: "1px",
+ height: "8px",
+ boxShadow: "0 0 2px rgba(0, 0, 0, .6)",
+ background: "#fff",
+ marginTop: "1px",
+ transform: "translateX(-2px)"
+ } })
+ })
+ })
+ ]
+ });
+ }
+};
+/**
+* Color conversion and validation helpers built on `tinycolor2`.
+*
+* Forked from
+* {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/helpers/color.js | react-color's color helpers}
+* (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
+*/
+const VALIDATION_KEYS = /* @__PURE__ */ new Set([
+ "r",
+ "g",
+ "b",
+ "a",
+ "h",
+ "s",
+ "l",
+ "v"
+]), PERCENT_PATTERN = /^\d+%$/;
+function simpleCheckForValidColor(data) {
+ if (typeof data == "string") return data;
+ let checked = 0, passed = 0;
+ 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));
+ return checked === passed && data;
+}
+function toState(data, oldHue) {
+ 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();
+ hsl.s === 0 && (hsl.h = oldHue ?? 0, hsv.h = oldHue ?? 0);
+ 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;
+ return {
+ hsl,
+ hex: transparent ? "transparent" : `#${hex}`,
+ rgb,
+ hsv,
+ oldHue: incomingHue || oldHue || hsl.h,
+ source: source ?? ""
+ };
+}
+function isValidHex(hex) {
+ if (hex === "transparent") return !0;
+ let lh = +(hex.charAt(0) === "#");
+ return hex.length !== 4 + lh && hex.length < 7 + lh && tinycolor(hex).isValid();
+}
+/**
+* `CustomPicker` higher-order component: manages color state and injects the
+* normalized color (`hsl`/`hsv`/`rgb`/`hex`) plus an `onChange` handler into the
+* wrapped picker.
+*
+* Forked from
+* {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/ColorWrap.js | react-color's ColorWrap}
+* (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
+*
+* @remarks
+* Kept as a class component for this round (function-component conversion is a
+* follow-up PR). `prop-types` and the unused `lodash` `debounce` of
+* `onChangeComplete` have been removed.
+*/
+const DEFAULT_COLOR$1 = {
+ h: 250,
+ s: .5,
+ l: .2,
+ a: 1
+};
+function CustomPicker(Picker) {
+ class ColorPicker extends PureComponent {
+ static getDerivedStateFromProps(nextProps, state) {
+ return { ...toState(nextProps.color ?? DEFAULT_COLOR$1, state.oldHue) };
+ }
+ constructor(props) {
+ super(props), this.state = { ...toState(props.color ?? DEFAULT_COLOR$1, 0) };
+ }
+ handleChange = (data) => {
+ if (!simpleCheckForValidColor(data)) return;
+ let colors = toState(data, (typeof data == "string" ? void 0 : "h" in data ? data.h : void 0) || this.state.oldHue);
+ this.setState(colors), this.props.onChange?.(colors);
+ };
+ render() {
+ let injected = {
+ hsl: this.state.hsl,
+ hsv: this.state.hsv,
+ rgb: this.state.rgb,
+ hex: this.state.hex,
+ oldHue: this.state.oldHue,
+ source: this.state.source,
+ onChange: this.handleChange
+ };
+ return /* @__PURE__ */ jsx(Picker, {
+ ...this.props,
+ ...injected
+ });
+ }
+ }
+ return ColorPicker;
+}
+/**
+* Labeled text input with arrow-key stepping and drag-to-change support.
+*
+* Forked from
+* {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/EditableInput.js | react-color's EditableInput}
+* (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
+*
+* @remarks
+* Kept as a class component for this round; converting to a function component
+* (with `useId`, `useRef`, etc.) is deferred to a follow-up PR. `reactcss` and
+* `prop-types` have been removed, and deprecated `keyCode` checks replaced with
+* `event.key`.
+*/
+const getNumberValue = (value) => Number(String(value).replace(/%/g, ""));
+let idCounter = 1;
+var EditableInput = class extends Component {
+ inputId;
+ input = null;
+ constructor(props) {
+ super(props);
+ let initialValue = String(props.value ?? "").toUpperCase();
+ this.state = {
+ value: initialValue,
+ blurValue: initialValue
+ }, this.inputId = `rc-editable-input-${idCounter++}`;
+ }
+ componentDidUpdate(prevProps, prevState) {
+ if (this.props.value !== this.state.value && (prevProps.value !== this.props.value || prevState.value !== this.state.value)) {
+ let nextValue = String(this.props.value ?? "").toUpperCase(), isFocused = this.input === document.activeElement;
+ this.setState(isFocused ? { blurValue: nextValue } : {
+ value: nextValue,
+ blurValue: this.state.blurValue ? "" : nextValue
+ });
+ }
+ }
+ componentWillUnmount() {
+ this.unbindEventListeners();
+ }
+ setInputRef = (input) => {
+ this.input = input;
+ };
+ getValueObjectWithLabel = (value) => ({ [this.props.label]: String(value) });
+ getArrowOffset = () => this.props.arrowOffset ?? 1;
+ setUpdatedValue = (value, event) => {
+ this.props.onChange?.(this.getValueObjectWithLabel(value), event), this.setState({ value: String(value) });
+ };
+ handleBlur = () => {
+ this.state.blurValue && this.setState({
+ value: this.state.blurValue,
+ blurValue: ""
+ });
+ };
+ handleChange = (event) => {
+ this.setUpdatedValue(event.target.value, event);
+ };
+ handleKeyDown = (event) => {
+ let value = getNumberValue(event.currentTarget.value), isUp = event.key === "ArrowUp", isDown = event.key === "ArrowDown";
+ if (!Number.isNaN(value) && (isUp || isDown)) {
+ let offset = this.getArrowOffset(), updatedValue = isUp ? value + offset : value - offset;
+ this.setUpdatedValue(updatedValue, event);
+ }
+ };
+ handleDrag = (event) => {
+ if (!this.props.dragLabel) return;
+ let { dragMax, value } = this.props, numericValue = typeof value == "number" ? value : Number(value), newValue = Math.round(numericValue + event.movementX);
+ dragMax !== void 0 && newValue >= 0 && newValue <= dragMax && this.props.onChange?.(this.getValueObjectWithLabel(newValue), event);
+ };
+ handleMouseDown = (event) => {
+ this.props.dragLabel && (event.preventDefault(), this.handleDrag(event.nativeEvent), window.addEventListener("mousemove", this.handleDrag), window.addEventListener("mouseup", this.handleMouseUp));
+ };
+ handleMouseUp = () => {
+ this.unbindEventListeners();
+ };
+ unbindEventListeners = () => {
+ window.removeEventListener("mousemove", this.handleDrag), window.removeEventListener("mouseup", this.handleMouseUp);
+ };
+ render() {
+ let style = this.props.style ?? {}, wrapStyle = {
+ position: "relative",
+ ...style.wrap
+ }, inputStyle = { ...style.input }, labelStyle = {
+ ...style.label,
+ ...this.props.dragLabel ? { cursor: "ew-resize" } : null
+ };
+ return /* @__PURE__ */ jsxs("div", {
+ style: wrapStyle,
+ children: [/* @__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"
+ }), this.props.label && !this.props.hideLabel ? /* @__PURE__ */ jsx("label", {
+ htmlFor: this.inputId,
+ style: labelStyle,
+ onMouseDown: this.handleMouseDown,
+ children: this.props.label
+ }) : null]
+ });
+ }
+};
+function calculateChange$1(e, direction, hsl, container) {
+ 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);
+ if (direction === "vertical") {
+ let h;
+ return h = top < 0 ? 359 : top > containerHeight ? 0 : 360 * (-(top * 100 / containerHeight) + 100) / 100, hsl.h === h ? null : {
+ h,
+ s: hsl.s,
+ l: hsl.l,
+ a: hsl.a ?? 1,
+ source: "hsl"
+ };
+ }
+ let h;
+ return h = left < 0 ? 0 : left > containerWidth ? 359 : 360 * (left * 100 / containerWidth) / 100, hsl.h === h ? null : {
+ h,
+ s: hsl.s,
+ l: hsl.l,
+ a: hsl.a ?? 1,
+ source: "hsl"
+ };
+}
+/**
+* Hue slider.
+*
+* Forked from
+* {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/Hue.js | react-color's Hue}
+* (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
+*
+* @remarks
+* Kept as a class component for this round (function-component conversion is a
+* follow-up PR). The upstream raw `<style>` tag holding the static hue gradient
+* has been replaced with a `styled-components` element, and `reactcss` removed.
+*/
+const HueGradient = styled.div.withConfig({
+ displayName: "HueGradient",
+ componentId: "sc-kldwsm-0"
+})`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%)"};`;
+var Hue = class extends Component {
+ container = null;
+ componentWillUnmount() {
+ this.unbindEventListeners();
+ }
+ setContainerRef = (node) => {
+ this.container = node;
+ };
+ handleChange = (event) => {
+ if (!this.container) return;
+ let change = calculateChange$1(event, this.props.direction, this.props.hsl, this.container);
+ change && typeof this.props.onChange == "function" && this.props.onChange(change);
+ };
+ handleMouseDown = (event) => {
+ this.handleChange(event.nativeEvent), window.addEventListener("mousemove", this.handleChange), window.addEventListener("mouseup", this.handleMouseUp);
+ };
+ handleMouseUp = () => {
+ this.unbindEventListeners();
+ };
+ unbindEventListeners = () => {
+ window.removeEventListener("mousemove", this.handleChange), window.removeEventListener("mouseup", this.handleMouseUp);
+ };
+ render() {
+ let { hsl, direction = "horizontal", radius, shadow } = this.props, pointerStyle = direction === "vertical" ? {
+ position: "absolute",
+ left: "0px",
+ top: `${-(hsl.h * 100 / 360) + 100}%`
+ } : {
+ position: "absolute",
+ left: `${hsl.h * 100 / 360}%`
+ };
+ return /* @__PURE__ */ jsx("div", {
+ style: {
+ position: "absolute",
+ inset: 0,
+ borderRadius: radius,
+ boxShadow: shadow
+ },
+ children: /* @__PURE__ */ jsx(HueGradient, {
+ $direction: direction,
+ style: {
+ padding: "0 2px",
+ position: "relative",
+ height: "100%",
+ borderRadius: radius
+ },
+ ref: this.setContainerRef,
+ onMouseDown: this.handleMouseDown,
+ onTouchMove: this.handleChange,
+ onTouchStart: this.handleChange,
+ children: /* @__PURE__ */ jsx("div", {
+ style: pointerStyle,
+ children: /* @__PURE__ */ jsx("div", { style: {
+ marginTop: "1px",
+ width: "4px",
+ borderRadius: "1px",
+ height: "8px",
+ boxShadow: "0 0 2px rgba(0, 0, 0, .6)",
+ background: "#fff",
+ transform: "translateX(-2px)"
+ } })
+ })
+ })
+ });
+ }
+};
+function calculateChange(e, hsl, container) {
+ 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);
+ left < 0 ? left = 0 : left > containerWidth && (left = containerWidth), top < 0 ? top = 0 : top > containerHeight && (top = containerHeight);
+ let saturation = left / containerWidth, bright = 1 - top / containerHeight;
+ return {
+ h: hsl.h,
+ s: saturation,
+ v: bright,
+ a: hsl.a ?? 1,
+ source: "hsv"
+ };
+}
+/**
+* Saturation / value box.
+*
+* Forked from
+* {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/Saturation.js | react-color's Saturation}
+* (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
+*
+* @remarks
+* Kept as a class component for this round (function-component conversion is a
+* follow-up PR). The upstream raw `<style>` tag holding the static white/black
+* gradients has been replaced with `styled-components` elements, `reactcss`
+* removed, and `lodash` swapped for `lodash-es`.
+*/
+const SaturationWhite = styled.div.withConfig({
+ displayName: "SaturationWhite",
+ componentId: "sc-0wl7vo-0"
+})`background:linear-gradient(to right,#fff,rgba(255,255,255,0));`, SaturationBlack = styled.div.withConfig({
+ displayName: "SaturationBlack",
+ componentId: "sc-0wl7vo-1"
+})`background:linear-gradient(to top,#000,rgba(0,0,0,0));`;
+var Saturation = class extends Component {
+ container = null;
+ throttle = throttle((handler, data) => {
+ handler(data);
+ }, 50);
+ componentWillUnmount() {
+ this.throttle.cancel(), this.unbindEventListeners();
+ }
+ setContainerRef = (node) => {
+ this.container = node;
+ };
+ getContainerRenderWindow() {
+ let { container } = this, renderWindow = window;
+ for (; !renderWindow.document.contains(container) && renderWindow.parent !== renderWindow;) renderWindow = renderWindow.parent;
+ return renderWindow;
+ }
+ handleChange = (event) => {
+ !this.container || typeof this.props.onChange != "function" || this.throttle(this.props.onChange, calculateChange(event, this.props.hsl, this.container));
+ };
+ handleMouseDown = (event) => {
+ this.handleChange(event.nativeEvent);
+ let renderWindow = this.getContainerRenderWindow();
+ renderWindow.addEventListener("mousemove", this.handleChange), renderWindow.addEventListener("mouseup", this.handleMouseUp);
+ };
+ handleMouseUp = () => {
+ this.unbindEventListeners();
+ };
+ unbindEventListeners = () => {
+ let renderWindow = this.getContainerRenderWindow();
+ renderWindow.removeEventListener("mousemove", this.handleChange), renderWindow.removeEventListener("mouseup", this.handleMouseUp);
+ };
+ render() {
+ let { hsl, hsv, radius, shadow } = this.props, pointerStyle = {
+ position: "absolute",
+ top: `${-(hsv.v * 100) + 100}%`,
+ left: `${hsv.s * 100}%`,
+ cursor: "default"
+ };
+ return /* @__PURE__ */ jsx("div", {
+ style: {
+ position: "absolute",
+ inset: 0,
+ background: `hsl(${hsl.h},100%, 50%)`,
+ borderRadius: radius
+ },
+ ref: this.setContainerRef,
+ onMouseDown: this.handleMouseDown,
+ onTouchMove: this.handleChange,
+ onTouchStart: this.handleChange,
+ children: /* @__PURE__ */ jsxs(SaturationWhite, {
+ style: {
+ position: "absolute",
+ inset: 0,
+ borderRadius: radius
+ },
+ children: [/* @__PURE__ */ jsx(SaturationBlack, { style: {
+ position: "absolute",
+ inset: 0,
+ boxShadow: shadow,
+ borderRadius: radius
+ } }), /* @__PURE__ */ jsx("div", {
+ style: pointerStyle,
+ children: /* @__PURE__ */ jsx("div", { style: {
+ width: "4px",
+ height: "4px",
+ 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)",
+ borderRadius: "50%",
+ cursor: "pointer",
+ transform: "translate(-2px, -2px)"
+ } })
+ })]
+ })
+ });
+ }
+};
+const ColorPickerFields = (t0) => {
+ 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;
+ $[0] !== sanity.color.input.default.enabled.bg || $[1] !== sanity.color.input.default.enabled.fg || $[2] !== t1 || $[3] !== t2 ? (t3 = {
+ width: "80%",
+ padding: "4px 10% 3px",
+ border: "none",
+ boxShadow: t1,
+ color: sanity.color.input.default.enabled.fg,
+ backgroundColor: sanity.color.input.default.enabled.bg,
+ fontSize: t2,
+ textAlign: "center"
+ }, $[0] = sanity.color.input.default.enabled.bg, $[1] = sanity.color.input.default.enabled.fg, $[2] = t1, $[3] = t2, $[4] = t3) : t3 = $[4];
+ let t4 = sanity.fonts.label.sizes[0]?.fontSize, t5;
+ $[5] !== sanity.color.base.fg || $[6] !== t4 ? (t5 = {
+ display: "block",
+ textAlign: "center",
+ fontSize: t4,
+ color: sanity.color.base.fg,
+ paddingTop: "3px",
+ paddingBottom: "4px",
+ textTransform: "capitalize"
+ }, $[5] = sanity.color.base.fg, $[6] = t4, $[7] = t5) : t5 = $[7];
+ let t6;
+ $[8] !== t3 || $[9] !== t5 ? (t6 = {
+ input: t3,
+ label: t5
+ }, $[8] = t3, $[9] = t5, $[10] = t6) : t6 = $[10];
+ let inputStyles = t6, t7;
+ $[11] !== hsl || $[12] !== onChange || $[13] !== rgb ? (t7 = (data) => {
+ if ("hex" in data && data.hex && isValidHex(data.hex)) onChange({
+ hex: data.hex,
+ source: "hex"
+ });
+ else if (rgb && ("r" in data && data.r || "g" in data && data.g || "b" in data && data.b)) onChange({
+ r: Number(data.r) || rgb.r,
+ g: Number(data.g) || rgb.g,
+ b: Number(data.b) || rgb.b,
+ a: rgb.a,
+ source: "rgb"
+ });
+ else if (hsl && "a" in data && data.a) {
+ let alpha = Number(data.a);
+ alpha < 0 ? alpha = 0 : alpha > 100 && (alpha = 100), alpha /= 100, onChange({
+ h: hsl.h,
+ s: hsl.s,
+ l: hsl.l,
+ a: alpha,
+ source: "hsl"
+ });
+ }
+ }, $[11] = hsl, $[12] = onChange, $[13] = rgb, $[14] = t7) : t7 = $[14];
+ let handleChange = t7, t8;
+ $[15] === hex ? t8 = $[16] : (t8 = hex?.replace("#", ""), $[15] = hex, $[16] = t8);
+ let t9;
+ $[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];
+ let t10 = rgb?.r, t11;
+ $[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];
+ let t12 = rgb?.g, t13;
+ $[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];
+ let t14 = rgb?.b, t15;
+ $[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];
+ let t16;
+ $[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];
+ let t17;
+ return $[38] !== t11 || $[39] !== t13 || $[40] !== t15 || $[41] !== t16 || $[42] !== t9 ? (t17 = /* @__PURE__ */ jsxs(Flex, { children: [
+ t9,
+ t11,
+ t13,
+ t15,
+ t16
+ ] }), $[38] = t11, $[39] = t13, $[40] = t15, $[41] = t16, $[42] = t9, $[43] = t17) : t17 = $[43], t17;
+}, ColorBox = styled(Box).withConfig({
+ displayName: "ColorBox",
+ componentId: "sc-pfhngk-0"
+})`position:absolute;top:0;left:0;width:100%;height:100%;`, ReadOnlyContainer = styled(Flex).withConfig({
+ displayName: "ReadOnlyContainer",
+ componentId: "sc-pfhngk-1"
+})`margin-top:6rem;background-color:var(--card-bg-color);position:relative;width:100%;`, ColorPicker = CustomPicker((props) => {
+ let $ = c(46), { width, color: t0, onChange, onUnset, disableAlpha, colorList, readOnly } = props, { rgb, hex, hsv, hsl } = t0;
+ if (!hsl || !hsv) return null;
+ let t1;
+ $[0] === width ? t1 = $[1] : (t1 = { width }, $[0] = width, $[1] = t1);
+ let t2;
+ $[2] !== disableAlpha || $[3] !== hsl || $[4] !== hsv || $[5] !== onChange || $[6] !== readOnly || $[7] !== rgb ? (t2 = !readOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
+ /* @__PURE__ */ jsx(Card, {
+ overflow: "hidden",
+ style: {
+ position: "relative",
+ height: "5em"
+ },
+ children: /* @__PURE__ */ jsx(Saturation, {
+ onChange,
+ hsl,
+ hsv
+ })
+ }),
+ /* @__PURE__ */ jsx(Card, {
+ shadow: 1,
+ radius: 3,
+ overflow: "hidden",
+ style: {
+ position: "relative",
+ height: "10px"
+ },
+ children: /* @__PURE__ */ jsx(Hue, {
+ hsl,
+ onChange: !readOnly && onChange
+ })
+ }),
+ !disableAlpha && /* @__PURE__ */ jsx(Card, {
+ shadow: 1,
+ radius: 3,
+ overflow: "hidden",
+ style: {
+ position: "relative",
+ height: "10px",
+ background: "#fff"
+ },
+ children: /* @__PURE__ */ jsx(Alpha, {
+ rgb,
+ hsl,
+ onChange
+ })
+ })
+ ] }), $[2] = disableAlpha, $[3] = hsl, $[4] = hsv, $[5] = onChange, $[6] = readOnly, $[7] = rgb, $[8] = t2) : t2 = $[8];
+ let t3, t4;
+ $[9] === Symbol.for("react.memo_cache_sentinel") ? (t3 = {
+ position: "relative",
+ minWidth: "4em",
+ background: "#fff"
+ }, t4 = /* @__PURE__ */ jsx(Checkboard, {
+ size: 8,
+ white: "transparent",
+ grey: "rgba(0,0,0,.08)"
+ }), $[9] = t3, $[10] = t4) : (t3 = $[9], t4 = $[10]);
+ let t5 = `rgba(${rgb?.r},${rgb?.g},${rgb?.b},${rgb?.a})`, t6;
+ $[11] === t5 ? t6 = $[12] : (t6 = /* @__PURE__ */ jsx(ColorBox, { style: { backgroundColor: t5 } }), $[11] = t5, $[12] = t6);
+ let t7;
+ $[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: [/* @__PURE__ */ jsx(Text, {
+ size: 3,
+ weight: "bold",
+ children: hex
+ }), /* @__PURE__ */ jsxs(Inline, {
+ gap: 3,
+ children: [/* @__PURE__ */ jsxs(Text, {
+ size: 1,
+ children: [
+ /* @__PURE__ */ jsx("strong", { children: "RGB: " }),
+ rgb?.r,
+ " ",
+ rgb?.g,
+ " ",
+ rgb?.b
+ ]
+ }), /* @__PURE__ */ jsxs(Text, {
+ size: 1,
+ children: [
+ /* @__PURE__ */ jsx("strong", { children: "HSL: " }),
+ " ",
+ Math.round(hsl?.h ?? 0),
+ " ",
+ Math.round((hsl?.s ?? 0) * 100),
+ "% ",
+ Math.round((hsl?.l ?? 0) * 100),
+ "%"
+ ]
+ })]
+ })]
+ })
+ }), $[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];
+ let t8;
+ $[22] !== t6 || $[23] !== t7 ? (t8 = /* @__PURE__ */ jsxs(Card, {
+ flex: 1,
+ radius: 2,
+ overflow: "hidden",
+ style: t3,
+ children: [
+ t4,
+ t6,
+ t7
+ ]
+ }), $[22] = t6, $[23] = t7, $[24] = t8) : t8 = $[24];
+ let t9;
+ $[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: [/* @__PURE__ */ jsx(Box, {
+ style: { width: 200 },
+ children: /* @__PURE__ */ jsx(ColorPickerFields, {
+ rgb,
+ hsl,
+ hex,
+ onChange,
+ disableAlpha
+ })
+ }), /* @__PURE__ */ jsx(Box, {
+ marginLeft: 2,
+ children: /* @__PURE__ */ jsx(Button, {
+ onClick: onUnset,
+ title: "Delete color",
+ icon: TrashIcon,
+ tone: "critical"
+ })
+ })]
+ }), $[25] = disableAlpha, $[26] = hex, $[27] = hsl, $[28] = onChange, $[29] = onUnset, $[30] = readOnly, $[31] = rgb, $[32] = t9) : t9 = $[32];
+ let t10;
+ $[33] !== t8 || $[34] !== t9 ? (t10 = /* @__PURE__ */ jsxs(Flex, { children: [t8, t9] }), $[33] = t8, $[34] = t9, $[35] = t10) : t10 = $[35];
+ let t11;
+ $[36] !== colorList || $[37] !== onChange ? (t11 = colorList && /* @__PURE__ */ jsx(ColorList, {
+ colors: colorList,
+ onChange
+ }), $[36] = colorList, $[37] = onChange, $[38] = t11) : t11 = $[38];
+ let t12;
+ $[39] !== t10 || $[40] !== t11 || $[41] !== t2 ? (t12 = /* @__PURE__ */ jsx(Card, {
+ padding: 1,
+ border: !0,
+ radius: 1,
+ children: /* @__PURE__ */ jsxs(Stack, {
+ gap: 2,
+ children: [
+ t2,
+ t10,
+ t11
+ ]
+ })
+ }), $[39] = t10, $[40] = t11, $[41] = t2, $[42] = t12) : t12 = $[42];
+ let t13;
+ return $[43] !== t1 || $[44] !== t12 ? (t13 = /* @__PURE__ */ jsx("div", {
+ style: t1,
+ children: t12
+ }), $[43] = t1, $[44] = t12, $[45] = t13) : t13 = $[45], t13;
+}), DEFAULT_COLOR = {
+ hex: "#24a3e3",
+ hsl: {
+ h: 200,
+ s: .7732,
+ l: .5156,
+ a: 1
+ },
+ hsv: {
+ h: 200,
+ s: .8414,
+ v: .8901,
+ a: 1
+ },
+ rgb: {
+ r: 46,
+ g: 163,
+ b: 227,
+ a: 1
+ },
+ source: "hex"
+};
+function ColorInput(props) {
+ let $ = c(10), { onChange, readOnly } = props, _value = props.value, [value, setColorOptimistic] = useOptimistic(_value), type = props.schemaType, focusRef = useRef(null), t0;
+ $[0] !== onChange || $[1] !== type ? (t0 = function(nextColor) {
+ let fieldPatches = type.fields.filter((field) => field.name in nextColor).map((field_0) => {
+ let nextFieldValue = nextColor[field_0.name];
+ return set(field_0.type.jsonType === "object" ? Object.assign({ _type: field_0.type.name }, nextFieldValue) : nextFieldValue, [field_0.name]);
+ });
+ onChange([
+ setIfMissing({ _type: type.name }),
+ set(type.name, ["_type"]),
+ set(nextColor.rgb?.a, ["alpha"]),
+ ...fieldPatches
+ ]);
+ }, $[0] = onChange, $[1] = type, $[2] = t0) : t0 = $[2];
+ let handleChange = t0, t1;
+ 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(() => {
+ setColorOptimistic(nextColor_0), handleChange(nextColor_0);
+ }),
+ readOnly: readOnly || typeof type.readOnly == "boolean" && type.readOnly,
+ disableAlpha: !!type.options?.disableAlpha,
+ colorList: type.options?.colorList,
+ onUnset: () => startTransition(() => {
+ setColorOptimistic(void 0), onChange(unset());
+ })
+ }) : /* @__PURE__ */ jsx(Button, {
+ icon: AddIcon,
+ mode: "ghost",
+ text: "Create color",
+ ref: focusRef,
+ disabled: !!readOnly,
+ onClick: () => startTransition(() => {
+ setColorOptimistic(DEFAULT_COLOR), handleChange(DEFAULT_COLOR);
+ })
+ }) }), $[3] = handleChange, $[4] = onChange, $[5] = readOnly, $[6] = setColorOptimistic, $[7] = type, $[8] = value, $[9] = t1) : t1 = $[9], t1;
+}
+export { ColorInput as default };
+
+//# sourceMappingURL=ColorInput.js.map
\ No newline at end of file