@sanity/color-input 4.0.5 → 4.0.7

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Sanity.io
+Copyright (c) 2025 Sanity
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,12 +1,10 @@
 # @sanity/color-input
 
-> For the v2 version, please refer to the [v2-branch](https://github.com/sanity-io/sanity/tree/next/packages/%40sanity/color-input).
-
 ## What is it?
 
 Color input plugin for [Sanity](https://sanity.io/) that stores selected colors in hex, hsl, hsv and rgb format.
 
-![Color input in the Studio](assets/color-input.png)
+![Color input in the Studio](https://github.com/user-attachments/assets/070a3718-33fc-47f7-94fb-93988902e81e)
 
 ## Installation
 
@@ -69,7 +67,7 @@ To disable the alpha option, set `disableAlpha` to `true`:
 
 Which will render accordingly:
 
-![This is an image](assets/no-alpha.png)
+![This is an image](https://github.com/user-attachments/assets/f7095cbb-8014-4aef-bb95-58f6aa25672b)
 
 ### Color list
 
@@ -99,7 +97,7 @@ This uses the `react-color` under the hood https://casesandberg.github.io/react-
 
 Which will render accordingly:
 
-![This is an image](assets/color-list.png)
+![This is an image](https://github.com/user-attachments/assets/f2a35da3-8944-46b3-a626-9aa870800b65)
 
 ## Data model
 
@@ -135,18 +133,3 @@ Which will render accordingly:
 ## License
 
 MIT-licensed. See LICENSE.
-
-## Develop & test
-
-This plugin uses [@sanity/plugin-kit](https://github.com/sanity-io/plugin-kit)
-with default configuration for build & watch scripts.
-
-See [Testing a plugin in Sanity Studio](https://github.com/sanity-io/plugin-kit#testing-a-plugin-in-sanity-studio)
-on how to run this plugin with hotreload in the studio.
-
-### Release new version
-
-Run ["CI & Release" workflow](https://github.com/sanity-io/color-input/actions/workflows/main.yml).
-Make sure to select the main branch and check "Release new version".
-
-Semantic release will only release on configured branches, so it is safe to run release on any branch.

package/dist/_chunks-cjs/ColorInput.cjs

@@ -0,0 +1,337 @@
+"use strict";
+var jsxRuntime = require("react/jsx-runtime"), react = require("react"), reactColor = require("react-color"), common = require("react-color/lib/components/common"), sanity = require("sanity"), styledComponents = require("styled-components"), useEffectEvent = require("use-effect-event"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), tinycolor = require("tinycolor2"), color = require("react-color/lib/helpers/color");
+function _interopDefaultCompat(e) {
+  return e && typeof e == "object" && "default" in e ? e : { default: e };
+}
+var tinycolor__default = /* @__PURE__ */ _interopDefaultCompat(tinycolor);
+const ColorListWrap = styledComponents.styled(ui.Flex)`
+  gap: 0.25em;
+`, ColorBoxContainer = styledComponents.styled.div`
+  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 = styledComponents.styled.div`
+  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) => colors.reduce((cls, c) => {
+  const color2 = c.hex ? tinycolor__default.default(c.hex) : tinycolor__default.default(c);
+  return color2.isValid() && cls.push({
+    color: c,
+    backgroundColor: color2.toRgbString()
+  }), cls;
+}, []), ColorList = react.memo(function({ colors, onChange }) {
+  return colors ? /* @__PURE__ */ jsxRuntime.jsx(ColorListWrap, { wrap: "wrap", children: validateColors(colors).map(({ color: color2, backgroundColor }, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+    ColorBoxContainer,
+    {
+      onClick: () => {
+        onChange(color2);
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(ColorBox$1, { style: { background: backgroundColor } })
+    },
+    `${backgroundColor}-${idx}`
+  )) }) : null;
+}), ColorPickerFields = ({
+  onChange,
+  rgb,
+  hsl,
+  hex,
+  disableAlpha
+}) => {
+  const { sanity: sanity2 } = ui.useTheme(), inputStyles = react.useMemo(
+    () => ({
+      input: {
+        width: "80%",
+        padding: "4px 10% 3px",
+        border: "none",
+        boxShadow: `inset 0 0 0 1px ${sanity2.color.input.default.enabled.border}`,
+        color: sanity2.color.input.default.enabled.fg,
+        backgroundColor: sanity2.color.input.default.enabled.bg,
+        fontSize: sanity2.fonts.text.sizes[0]?.fontSize,
+        textAlign: "center"
+      },
+      label: {
+        display: "block",
+        textAlign: "center",
+        fontSize: sanity2.fonts.label.sizes[0]?.fontSize,
+        color: sanity2.color.base.fg,
+        paddingTop: "3px",
+        paddingBottom: "4px",
+        textTransform: "capitalize"
+      }
+    }),
+    [sanity2]
+  ), handleChange = react.useCallback(
+    (data) => {
+      if ("hex" in data && data.hex && color.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"
+        });
+      }
+    },
+    [onChange, hsl, rgb]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 2, marginRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+      common.EditableInput,
+      {
+        style: inputStyles,
+        label: "hex",
+        value: hex?.replace("#", ""),
+        onChange: handleChange
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+      common.EditableInput,
+      {
+        style: inputStyles,
+        label: "r",
+        value: rgb?.r,
+        onChange: handleChange,
+        dragLabel: !0,
+        dragMax: 255
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+      common.EditableInput,
+      {
+        style: inputStyles,
+        label: "g",
+        value: rgb?.g,
+        onChange: handleChange,
+        dragLabel: !0,
+        dragMax: 255
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+      common.EditableInput,
+      {
+        style: inputStyles,
+        label: "b",
+        value: rgb?.b,
+        onChange: handleChange,
+        dragLabel: !0,
+        dragMax: 255
+      }
+    ) }),
+    !disableAlpha && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+      common.EditableInput,
+      {
+        style: inputStyles,
+        label: "a",
+        value: Math.round((rgb?.a ?? 1) * 100),
+        onChange: handleChange,
+        dragLabel: !0,
+        dragMax: 100
+      }
+    ) })
+  ] });
+}, ColorBox = styledComponents.styled(ui.Box)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+`, ReadOnlyContainer = styledComponents.styled(ui.Flex)`
+  margin-top: 6rem;
+  background-color: var(--card-bg-color);
+  position: relative;
+  width: 100%;
+`, ColorPickerInner = (props) => {
+  const {
+    width,
+    color: { rgb, hex, hsv, hsl },
+    onChange,
+    onUnset,
+    disableAlpha,
+    colorList,
+    readOnly
+  } = props;
+  return !hsl || !hsv ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: 1, border: !0, radius: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
+    !readOnly && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { overflow: "hidden", style: { position: "relative", height: "5em" }, children: /* @__PURE__ */ jsxRuntime.jsx(common.Saturation, { onChange, hsl, hsv }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Card,
+        {
+          shadow: 1,
+          radius: 3,
+          overflow: "hidden",
+          style: { position: "relative", height: "10px" },
+          children: /* @__PURE__ */ jsxRuntime.jsx(common.Hue, { hsl, onChange: !readOnly && onChange })
+        }
+      ),
+      !disableAlpha && /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Card,
+        {
+          shadow: 1,
+          radius: 3,
+          overflow: "hidden",
+          style: { position: "relative", height: "10px", background: "#fff" },
+          children: /* @__PURE__ */ jsxRuntime.jsx(common.Alpha, { rgb, hsl, onChange })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.Card,
+        {
+          flex: 1,
+          radius: 2,
+          overflow: "hidden",
+          style: { position: "relative", minWidth: "4em", background: "#fff" },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              common.Checkboard,
+              {
+                size: 8,
+                white: "transparent",
+                grey: "rgba(0,0,0,.08)",
+                renderers: {}
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ColorBox,
+              {
+                style: {
+                  backgroundColor: `rgba(${rgb?.r},${rgb?.g},${rgb?.b},${rgb?.a})`
+                }
+              }
+            ),
+            readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+              ReadOnlyContainer,
+              {
+                padding: 2,
+                paddingBottom: 1,
+                sizing: "border",
+                justify: "space-between",
+                children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, marginTop: 1, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 3, weight: "bold", children: hex }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Inline, { space: 3, children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "RGB: " }),
+                      rgb?.r,
+                      " ",
+                      rgb?.g,
+                      " ",
+                      rgb?.b
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "HSL: " }),
+                      " ",
+                      Math.round(hsl?.h ?? 0),
+                      " ",
+                      Math.round((hsl?.s ?? 0) * 100),
+                      "% ",
+                      Math.round((hsl?.l ?? 0) * 100),
+                      "%"
+                    ] })
+                  ] })
+                ] })
+              }
+            )
+          ]
+        }
+      ),
+      !readOnly && /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "flex-start", marginLeft: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { style: { width: 200 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          ColorPickerFields,
+          {
+            rgb,
+            hsl,
+            hex,
+            onChange,
+            disableAlpha
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginLeft: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: onUnset, title: "Delete color", icon: icons.TrashIcon, tone: "critical" }) })
+      ] })
+    ] }),
+    colorList && /* @__PURE__ */ jsxRuntime.jsx(ColorList, { colors: colorList, onChange })
+  ] }) }) });
+}, ColorPicker = reactColor.CustomPicker(ColorPickerInner), DEFAULT_COLOR = {
+  hex: "#24a3e3",
+  hsl: { h: 200, s: 0.7732, l: 0.5156, a: 1 },
+  hsv: { h: 200, s: 0.8414, v: 0.8901, a: 1 },
+  rgb: { r: 46, g: 163, b: 227, a: 1 },
+  source: "hex"
+};
+function ColorInput(props) {
+  const { onChange, readOnly } = props, value = props.value, type = props.schemaType, focusRef = react.useRef(null), [color2, setColor] = react.useState(value);
+  react.useEffect(() => react.startTransition(() => setColor(value)), [value]);
+  const [emitColor, setEmitColor] = react.useState(void 0), debouncedColor = react.useDeferredValue(emitColor), handleChange = useEffectEvent.useEffectEvent((nextColor) => {
+    const fieldPatches = type.fields.filter((field) => field.name in nextColor).map((field) => {
+      const nextFieldValue = nextColor[field.name], isObject = field.type.jsonType === "object";
+      return sanity.set(
+        isObject ? Object.assign({ _type: field.type.name }, nextFieldValue) : nextFieldValue,
+        [field.name]
+      );
+    });
+    onChange([
+      sanity.setIfMissing({ _type: type.name }),
+      sanity.set(type.name, ["_type"]),
+      sanity.set(nextColor.rgb?.a, ["alpha"]),
+      ...fieldPatches
+    ]);
+  });
+  react.useEffect(() => {
+    if (!debouncedColor) return;
+    const raf = requestAnimationFrame(() => handleChange(debouncedColor));
+    return () => cancelAnimationFrame(raf);
+  }, [debouncedColor]);
+  const handleCreateColor = react.useCallback(() => {
+    setColor(DEFAULT_COLOR), setEmitColor(DEFAULT_COLOR);
+  }, []), handleColorChange = react.useCallback((nextColor) => {
+    setColor(nextColor), setEmitColor(nextColor);
+  }, []), handleUnset = react.useCallback(() => {
+    setColor(void 0), onChange(sanity.unset());
+  }, [onChange]);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value && value.hex ? /* @__PURE__ */ jsxRuntime.jsx(
+    ColorPicker,
+    {
+      color: color2,
+      onChange: handleColorChange,
+      readOnly: readOnly || typeof type.readOnly == "boolean" && type.readOnly,
+      disableAlpha: !!type.options?.disableAlpha,
+      colorList: type.options?.colorList,
+      onUnset: handleUnset
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Button,
+    {
+      icon: icons.AddIcon,
+      mode: "ghost",
+      text: "Create color",
+      ref: focusRef,
+      disabled: !!readOnly,
+      onClick: handleCreateColor
+    }
+  ) });
+}
+exports.default = ColorInput;
+//# sourceMappingURL=ColorInput.cjs.map

package/dist/_chunks-cjs/ColorInput.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.cjs","sources":["../../src/ColorList.tsx","../../src/ColorPickerFields.tsx","../../src/ColorInput.tsx"],"sourcesContent":["import type {Color, ColorChangeHandler} from 'react-color'\n\nimport {memo} from 'react'\nimport {styled} from 'styled-components'\nimport tinycolor from 'tinycolor2'\n\nimport {Flex} from '@sanity/ui'\n\nconst ColorListWrap = styled(Flex)`\n  gap: 0.25em;\n`\n\nconst ColorBoxContainer = styled.div`\n  width: 2.1em;\n  height: 2.1em;\n  cursor: pointer;\n  position: relative;\n  overflow: hidden;\n  border-radius: 3px;\n  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=')\n    left center #fff;\n`\n\nconst ColorBox = styled.div`\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px var(--card-shadow-outline-color);\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n`\n\ninterface ValidatedColor {\n  color: Color\n  backgroundColor: string\n}\n\ninterface ColorListProps {\n  colors?: Array<Color>\n  onChange: ColorChangeHandler<Color>\n}\n\nconst validateColors = (colors: Array<Color>) =>\n  colors.reduce((cls: Array<ValidatedColor>, c) => {\n    // @ts-expect-error fix types later\n    const color = c.hex ? tinycolor(c.hex) : tinycolor(c)\n    if (color.isValid()) {\n      cls.push({\n        color: c,\n        backgroundColor: color.toRgbString(),\n      })\n    }\n    return cls\n  }, [])\n\nexport const ColorList = memo(function ColorList({colors, onChange}: ColorListProps) {\n  if (!colors) return null\n  return (\n    <ColorListWrap wrap=\"wrap\">\n      {validateColors(colors).map(({color, backgroundColor}, idx) => (\n        <ColorBoxContainer\n          key={`${backgroundColor}-${idx}`}\n          onClick={() => {\n            onChange(color)\n          }}\n        >\n          <ColorBox style={{background: backgroundColor}} />\n        </ColorBoxContainer>\n      ))}\n    </ColorListWrap>\n  )\n})\n","import type {Color, ColorChangeHandler, HSLColor, RGBColor} from 'react-color'\nimport type {EditableInputStyles} from 'react-color/lib/components/common/EditableInput'\n\nimport {useCallback, useMemo} from 'react'\nimport {EditableInput} from 'react-color/lib/components/common'\n// @ts-expect-error missing export\nimport {isValidHex} from 'react-color/lib/helpers/color'\n\nimport {Box, Flex, useTheme} from '@sanity/ui'\n\ninterface ColorPickerFieldsProps {\n  rgb?: RGBColor\n  hsl?: HSLColor\n  hex?: string\n  disableAlpha: boolean\n  onChange: ColorChangeHandler<Color>\n}\n\nexport const ColorPickerFields = ({\n  onChange,\n  rgb,\n  hsl,\n  hex,\n  disableAlpha,\n}: ColorPickerFieldsProps) => {\n  const {sanity} = useTheme()\n\n  const inputStyles: EditableInputStyles = useMemo(\n    () => ({\n      input: {\n        width: '80%',\n        padding: '4px 10% 3px',\n        border: 'none',\n        boxShadow: `inset 0 0 0 1px ${sanity.color.input.default.enabled.border}`,\n        color: sanity.color.input.default.enabled.fg,\n        backgroundColor: sanity.color.input.default.enabled.bg,\n        fontSize: sanity.fonts.text.sizes[0]?.fontSize,\n        textAlign: 'center',\n      },\n      label: {\n        display: 'block',\n        textAlign: 'center',\n        fontSize: sanity.fonts.label.sizes[0]?.fontSize,\n        color: sanity.color.base.fg,\n        paddingTop: '3px',\n        paddingBottom: '4px',\n        textTransform: 'capitalize',\n      },\n    }),\n    [sanity],\n  )\n\n  const handleChange: ColorChangeHandler<Record<string, string>> = useCallback(\n    (data) => {\n      if ('hex' in data && data['hex'] && isValidHex(data['hex'])) {\n        onChange({\n          hex: data['hex'],\n          source: 'hex',\n        })\n      } else if (\n        rgb &&\n        (('r' in data && data['r']) || ('g' in data && data['g']) || ('b' in data && data['b']))\n      ) {\n        onChange({\n          r: Number(data['r']) || rgb.r,\n          g: Number(data['g']) || rgb.g,\n          b: Number(data['b']) || rgb.b,\n          a: rgb.a,\n          source: 'rgb',\n        })\n      } else if (hsl && 'a' in data && data['a']) {\n        let alpha = Number(data['a'])\n        if (alpha < 0) {\n          alpha = 0\n        } else if (alpha > 100) {\n          alpha = 100\n        }\n        alpha /= 100\n\n        onChange({\n          h: hsl.h,\n          s: hsl.s,\n          l: hsl.l,\n          a: alpha,\n          source: 'hsl',\n        })\n      }\n    },\n    [onChange, hsl, rgb],\n  )\n\n  return (\n    <Flex>\n      <Box flex={2} marginRight={1}>\n        <EditableInput\n          style={inputStyles}\n          label=\"hex\"\n          value={hex?.replace('#', '')}\n          onChange={handleChange}\n        />\n      </Box>\n      <Box flex={1} marginRight={1}>\n        <EditableInput\n          style={inputStyles}\n          label=\"r\"\n          value={rgb?.r}\n          onChange={handleChange}\n          dragLabel\n          dragMax={255}\n        />\n      </Box>\n      <Box flex={1} marginRight={1}>\n        <EditableInput\n          style={inputStyles}\n          label=\"g\"\n          value={rgb?.g}\n          onChange={handleChange}\n          dragLabel\n          dragMax={255}\n        />\n      </Box>\n      <Box flex={1} marginRight={1}>\n        <EditableInput\n          style={inputStyles}\n          label=\"b\"\n          value={rgb?.b}\n          onChange={handleChange}\n          dragLabel\n          dragMax={255}\n        />\n      </Box>\n      {!disableAlpha && (\n        <Box flex={1}>\n          <EditableInput\n            style={inputStyles}\n            label=\"a\"\n            value={Math.round((rgb?.a ?? 1) * 100)}\n            onChange={handleChange}\n            dragLabel\n            dragMax={100}\n          />\n        </Box>\n      )}\n    </Flex>\n  )\n}\n","import type {CustomPickerInjectedProps} from 'react-color/lib/components/common/ColorWrap'\n\nimport {startTransition, useCallback, useDeferredValue, useEffect, useRef, useState} from 'react'\nimport {type Color, CustomPicker} from 'react-color'\nimport {Alpha, Checkboard, Hue, Saturation} from 'react-color/lib/components/common'\nimport {type ObjectInputProps, set, setIfMissing, unset} from 'sanity'\nimport {styled} from 'styled-components'\nimport {useEffectEvent} from 'use-effect-event'\n\nimport {AddIcon} from '@sanity/icons'\nimport {TrashIcon} from '@sanity/icons'\nimport {Box, Button, Card, Flex, Inline, Stack, Text} from '@sanity/ui'\n\nimport type {ColorSchemaType, ColorValue} from './types'\n\nimport {ColorList} from './ColorList'\nimport {ColorPickerFields} from './ColorPickerFields'\n\nconst ColorBox = styled(Box)`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n`\n\nconst ReadOnlyContainer = styled(Flex)`\n  margin-top: 6rem;\n  background-color: var(--card-bg-color);\n  position: relative;\n  width: 100%;\n`\n\ninterface ColorPickerProps extends CustomPickerInjectedProps<Color> {\n  width?: string\n  disableAlpha: boolean\n  colorList?: Array<Color> | undefined\n  readOnly?: boolean\n  onUnset: () => void\n  color: ColorValue\n}\n\nconst ColorPickerInner = (props: ColorPickerProps) => {\n  const {\n    width,\n    color: {rgb, hex, hsv, hsl},\n    onChange,\n    onUnset,\n    disableAlpha,\n    colorList,\n    readOnly,\n  } = props\n\n  if (!hsl || !hsv) {\n    return null\n  }\n\n  return (\n    <div style={{width}}>\n      <Card padding={1} border radius={1}>\n        <Stack space={2}>\n          {!readOnly && (\n            <>\n              <Card overflow=\"hidden\" style={{position: 'relative', height: '5em'}}>\n                <Saturation onChange={onChange} hsl={hsl} hsv={hsv} />\n              </Card>\n\n              <Card\n                shadow={1}\n                radius={3}\n                overflow=\"hidden\"\n                style={{position: 'relative', height: '10px'}}\n              >\n                <Hue hsl={hsl} onChange={!readOnly && onChange} />\n              </Card>\n\n              {!disableAlpha && (\n                <Card\n                  shadow={1}\n                  radius={3}\n                  overflow=\"hidden\"\n                  style={{position: 'relative', height: '10px', background: '#fff'}}\n                >\n                  <Alpha rgb={rgb} hsl={hsl} onChange={onChange} />\n                </Card>\n              )}\n            </>\n          )}\n          <Flex>\n            <Card\n              flex={1}\n              radius={2}\n              overflow=\"hidden\"\n              style={{position: 'relative', minWidth: '4em', background: '#fff'}}\n            >\n              <Checkboard\n                size={8}\n                white=\"transparent\"\n                grey=\"rgba(0,0,0,.08)\"\n                renderers={{} as {canvas: unknown}}\n              />\n              <ColorBox\n                style={{\n                  backgroundColor: `rgba(${rgb?.r},${rgb?.g},${rgb?.b},${rgb?.a})`,\n                }}\n              />\n\n              {readOnly && (\n                <ReadOnlyContainer\n                  padding={2}\n                  paddingBottom={1}\n                  sizing=\"border\"\n                  justify=\"space-between\"\n                >\n                  <Stack space={3} marginTop={1}>\n                    <Text size={3} weight=\"bold\">\n                      {hex}\n                    </Text>\n\n                    <Inline space={3}>\n                      <Text size={1}>\n                        <strong>RGB: </strong>\n                        {rgb?.r} {rgb?.g} {rgb?.b}\n                      </Text>\n                      <Text size={1}>\n                        <strong>HSL: </strong> {Math.round(hsl?.h ?? 0)}{' '}\n                        {Math.round((hsl?.s ?? 0) * 100)}% {Math.round((hsl?.l ?? 0) * 100)}%\n                      </Text>\n                    </Inline>\n                  </Stack>\n                </ReadOnlyContainer>\n              )}\n            </Card>\n\n            {!readOnly && (\n              <Flex align=\"flex-start\" marginLeft={2}>\n                <Box style={{width: 200}}>\n                  <ColorPickerFields\n                    rgb={rgb}\n                    hsl={hsl}\n                    hex={hex}\n                    onChange={onChange}\n                    disableAlpha={disableAlpha}\n                  />\n                </Box>\n                <Box marginLeft={2}>\n                  <Button onClick={onUnset} title=\"Delete color\" icon={TrashIcon} tone=\"critical\" />\n                </Box>\n              </Flex>\n            )}\n          </Flex>\n          {colorList && <ColorList colors={colorList} onChange={onChange} />}\n        </Stack>\n      </Card>\n    </div>\n  )\n}\n\nconst ColorPicker = CustomPicker(ColorPickerInner)\n\nconst DEFAULT_COLOR: ColorValue & {source: string} = {\n  hex: '#24a3e3',\n  hsl: {h: 200, s: 0.7732, l: 0.5156, a: 1},\n  hsv: {h: 200, s: 0.8414, v: 0.8901, a: 1},\n  rgb: {r: 46, g: 163, b: 227, a: 1},\n  source: 'hex',\n}\n\nexport default function ColorInput(props: ObjectInputProps) {\n  const {onChange, readOnly} = props\n  const value = props.value as ColorValue | undefined\n  const type = props.schemaType as ColorSchemaType\n  const focusRef = useRef<HTMLButtonElement>(null)\n\n  // use local state so we can have instant ui updates while debouncing patch emits\n  const [color, setColor] = useState(value)\n  // Marking the `setColor` in a transition allows React to interrupt render should the user start dragging the input before React is finished rendering\n  useEffect(() => startTransition(() => setColor(value)), [value])\n\n  // The color picker emits onChange events continuously while the user is sliding the\n  // hue/saturation/alpha selectors. This debounces the event to avoid excessive patches\n  // and massively improve render performance and avoid jank\n  const [emitColor, setEmitColor] = useState<typeof value>(undefined)\n  const debouncedColor = useDeferredValue(emitColor)\n  const handleChange = useEffectEvent((nextColor: ColorValue) => {\n    const fieldPatches = type.fields\n      .filter((field) => field.name in nextColor)\n      .map((field) => {\n        const nextFieldValue = nextColor[field.name as keyof ColorValue]\n        const isObject = field.type.jsonType === 'object'\n        return set(\n          isObject ? Object.assign({_type: field.type.name}, nextFieldValue) : nextFieldValue,\n          [field.name],\n        )\n      })\n\n    onChange([\n      setIfMissing({_type: type.name}),\n      set(type.name, ['_type']),\n      set(nextColor.rgb?.a, ['alpha']),\n      ...fieldPatches,\n    ])\n  })\n  useEffect(() => {\n    if (!debouncedColor) return undefined\n    const raf = requestAnimationFrame(() => handleChange(debouncedColor))\n    return () => cancelAnimationFrame(raf)\n  }, [debouncedColor])\n\n  const handleCreateColor = useCallback(() => {\n    setColor(DEFAULT_COLOR)\n    setEmitColor(DEFAULT_COLOR)\n  }, [])\n\n  const handleColorChange = useCallback((nextColor: ColorValue) => {\n    setColor(nextColor)\n    setEmitColor(nextColor)\n  }, [])\n\n  const handleUnset = useCallback(() => {\n    setColor(undefined)\n    onChange(unset())\n  }, [onChange])\n\n  return (\n    <>\n      {value && value.hex ? (\n        <ColorPicker\n          color={color!}\n          onChange={handleColorChange}\n          readOnly={readOnly || (typeof type.readOnly === 'boolean' && type.readOnly)}\n          disableAlpha={!!type.options?.disableAlpha}\n          colorList={type.options?.colorList}\n          onUnset={handleUnset}\n        />\n      ) : (\n        <Button\n          icon={AddIcon}\n          mode=\"ghost\"\n          text=\"Create color\"\n          ref={focusRef}\n          disabled={Boolean(readOnly)}\n          onClick={handleCreateColor}\n        />\n      )}\n    </>\n  )\n}\n"],"names":["styled","Flex","ColorBox","color","tinycolor","memo","jsx","sanity","useTheme","useMemo","useCallback","isValidHex","Box","EditableInput","Card","jsxs","Stack","Fragment","Saturation","Hue","Alpha","Checkboard","Text","Inline","Button","TrashIcon","CustomPicker","useRef","useState","useEffect","startTransition","useDeferredValue","useEffectEvent","set","setIfMissing","unset","AddIcon"],"mappings":"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"}