@sanity/color-input 4.0.6 → 4.0.7

package/dist/_chunks-es/ColorInput.js

@@ -0,0 +1,344 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { memo, useMemo, useCallback, useRef, useState, useEffect, startTransition, useDeferredValue } from "react";
+import { CustomPicker } from "react-color";
+import { EditableInput, Saturation, Hue, Alpha, Checkboard } from "react-color/lib/components/common";
+import { set, setIfMissing, unset } from "sanity";
+import { styled } from "styled-components";
+import { useEffectEvent } from "use-effect-event";
+import { AddIcon, TrashIcon } from "@sanity/icons";
+import { Flex, useTheme, Box, Button, Card, Stack, Text, Inline } from "@sanity/ui";
+import tinycolor from "tinycolor2";
+import { isValidHex } from "react-color/lib/helpers/color";
+const ColorListWrap = styled(Flex)`
+  gap: 0.25em;
+`, ColorBoxContainer = 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 = 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 color = c.hex ? tinycolor(c.hex) : tinycolor(c);
+  return color.isValid() && cls.push({
+    color: c,
+    backgroundColor: color.toRgbString()
+  }), cls;
+}, []), ColorList = memo(function({ colors, onChange }) {
+  return colors ? /* @__PURE__ */ jsx(ColorListWrap, { wrap: "wrap", children: validateColors(colors).map(({ color, backgroundColor }, idx) => /* @__PURE__ */ jsx(
+    ColorBoxContainer,
+    {
+      onClick: () => {
+        onChange(color);
+      },
+      children: /* @__PURE__ */ jsx(ColorBox$1, { style: { background: backgroundColor } })
+    },
+    `${backgroundColor}-${idx}`
+  )) }) : null;
+}), ColorPickerFields = ({
+  onChange,
+  rgb,
+  hsl,
+  hex,
+  disableAlpha
+}) => {
+  const { sanity } = useTheme(), inputStyles = useMemo(
+    () => ({
+      input: {
+        width: "80%",
+        padding: "4px 10% 3px",
+        border: "none",
+        boxShadow: `inset 0 0 0 1px ${sanity.color.input.default.enabled.border}`,
+        color: sanity.color.input.default.enabled.fg,
+        backgroundColor: sanity.color.input.default.enabled.bg,
+        fontSize: sanity.fonts.text.sizes[0]?.fontSize,
+        textAlign: "center"
+      },
+      label: {
+        display: "block",
+        textAlign: "center",
+        fontSize: sanity.fonts.label.sizes[0]?.fontSize,
+        color: sanity.color.base.fg,
+        paddingTop: "3px",
+        paddingBottom: "4px",
+        textTransform: "capitalize"
+      }
+    }),
+    [sanity]
+  ), handleChange = useCallback(
+    (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"
+        });
+      }
+    },
+    [onChange, hsl, rgb]
+  );
+  return /* @__PURE__ */ jsxs(Flex, { children: [
+    /* @__PURE__ */ jsx(Box, { flex: 2, marginRight: 1, children: /* @__PURE__ */ jsx(
+      EditableInput,
+      {
+        style: inputStyles,
+        label: "hex",
+        value: hex?.replace("#", ""),
+        onChange: handleChange
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsx(
+      EditableInput,
+      {
+        style: inputStyles,
+        label: "r",
+        value: rgb?.r,
+        onChange: handleChange,
+        dragLabel: !0,
+        dragMax: 255
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsx(
+      EditableInput,
+      {
+        style: inputStyles,
+        label: "g",
+        value: rgb?.g,
+        onChange: handleChange,
+        dragLabel: !0,
+        dragMax: 255
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsx(
+      EditableInput,
+      {
+        style: inputStyles,
+        label: "b",
+        value: rgb?.b,
+        onChange: handleChange,
+        dragLabel: !0,
+        dragMax: 255
+      }
+    ) }),
+    !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
+      }
+    ) })
+  ] });
+}, ColorBox = styled(Box)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+`, ReadOnlyContainer = styled(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__ */ jsx("div", { style: { width }, children: /* @__PURE__ */ jsx(Card, { padding: 1, border: !0, radius: 1, children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+    !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 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Flex, { children: [
+      /* @__PURE__ */ jsxs(
+        Card,
+        {
+          flex: 1,
+          radius: 2,
+          overflow: "hidden",
+          style: { position: "relative", minWidth: "4em", background: "#fff" },
+          children: [
+            /* @__PURE__ */ jsx(
+              Checkboard,
+              {
+                size: 8,
+                white: "transparent",
+                grey: "rgba(0,0,0,.08)",
+                renderers: {}
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ColorBox,
+              {
+                style: {
+                  backgroundColor: `rgba(${rgb?.r},${rgb?.g},${rgb?.b},${rgb?.a})`
+                }
+              }
+            ),
+            readOnly && /* @__PURE__ */ jsx(
+              ReadOnlyContainer,
+              {
+                padding: 2,
+                paddingBottom: 1,
+                sizing: "border",
+                justify: "space-between",
+                children: /* @__PURE__ */ jsxs(Stack, { space: 3, marginTop: 1, children: [
+                  /* @__PURE__ */ jsx(Text, { size: 3, weight: "bold", children: hex }),
+                  /* @__PURE__ */ jsxs(Inline, { space: 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),
+                      "%"
+                    ] })
+                  ] })
+                ] })
+              }
+            )
+          ]
+        }
+      ),
+      !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" }) })
+      ] })
+    ] }),
+    colorList && /* @__PURE__ */ jsx(ColorList, { colors: colorList, onChange })
+  ] }) }) });
+}, ColorPicker = 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 = useRef(null), [color, setColor] = useState(value);
+  useEffect(() => startTransition(() => setColor(value)), [value]);
+  const [emitColor, setEmitColor] = useState(void 0), debouncedColor = useDeferredValue(emitColor), handleChange = 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 set(
+        isObject ? Object.assign({ _type: field.type.name }, nextFieldValue) : nextFieldValue,
+        [field.name]
+      );
+    });
+    onChange([
+      setIfMissing({ _type: type.name }),
+      set(type.name, ["_type"]),
+      set(nextColor.rgb?.a, ["alpha"]),
+      ...fieldPatches
+    ]);
+  });
+  useEffect(() => {
+    if (!debouncedColor) return;
+    const raf = requestAnimationFrame(() => handleChange(debouncedColor));
+    return () => cancelAnimationFrame(raf);
+  }, [debouncedColor]);
+  const handleCreateColor = useCallback(() => {
+    setColor(DEFAULT_COLOR), setEmitColor(DEFAULT_COLOR);
+  }, []), handleColorChange = useCallback((nextColor) => {
+    setColor(nextColor), setEmitColor(nextColor);
+  }, []), handleUnset = useCallback(() => {
+    setColor(void 0), onChange(unset());
+  }, [onChange]);
+  return /* @__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
+    }
+  ) });
+}
+export {
+  ColorInput as default
+};
+//# sourceMappingURL=ColorInput.js.map

package/dist/_chunks-es/ColorInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.js","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":["ColorBox"],"mappings":"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"}

package/{lib/index.js → dist/index.cjs}

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: !0 });
 var sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), react = require("react");
 const ColorInput = react.lazy(() => Promise.resolve().then(function() {
-  return require("./_chunks-cjs/ColorInput.js");
+  return require("./_chunks-cjs/ColorInput.cjs");
 })), round = (val = 1) => Math.round(val * 100), colorTypeName = "color", color = sanity.defineType({
   name: colorTypeName,
   type: "object",
@@ -111,4 +111,4 @@ exports.colorInput = colorInput;
 exports.hslaColor = hslaColor;
 exports.hsvaColor = hsvaColor;
 exports.rgbaColor = rgbaColor;
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/LazyColorInput.tsx","../src/schemas/color.tsx","../src/schemas/hslaColor.ts","../src/schemas/hsvaColor.ts","../src/schemas/rgbaColor.ts","../src/index.ts"],"sourcesContent":["import {lazy} from 'react'\n\nexport const ColorInput = lazy(() => import('./ColorInput'))\n","import {defineType, type ObjectDefinition} from 'sanity'\n\nimport {ColorInput} from '../LazyColorInput'\nimport {type ColorOptions} from '../types'\n\nconst round = (val: number = 1) => Math.round(val * 100)\n\nconst colorTypeName = 'color' as const\n\n/**\n * @public\n */\nexport interface ColorDefinition extends Omit<ObjectDefinition, 'type' | 'fields' | 'options'> {\n  type: typeof colorTypeName\n  options?: ColorOptions\n}\n\ndeclare module 'sanity' {\n  // makes type: 'color' narrow correctly when using defineType/defineField/defineArrayMember\n  export interface IntrinsicDefinitions {\n    color: ColorDefinition\n  }\n}\n\nexport const color = defineType({\n  name: colorTypeName,\n  type: 'object',\n  title: 'Color',\n  components: {input: ColorInput},\n  fields: [\n    {\n      title: 'Hex',\n      name: 'hex',\n      type: 'string',\n    },\n    {\n      title: 'Alpha',\n      name: 'alpha',\n      type: 'number',\n    },\n    {\n      title: 'Hue Saturation Lightness',\n      name: 'hsl',\n      type: 'hslaColor',\n    },\n    {\n      title: 'Hue Saturation Value',\n      name: 'hsv',\n      type: 'hsvaColor',\n    },\n    {\n      title: 'Red Green Blue (rgb)',\n      name: 'rgb',\n      type: 'rgbaColor',\n    },\n  ],\n  preview: {\n    select: {\n      title: 'hex',\n      alpha: 'alpha',\n      hex: 'hex',\n      hsl: 'hsl',\n    },\n    prepare({\n      title,\n      hex,\n      hsl,\n      alpha,\n    }: {\n      title: string\n      alpha?: number\n      hex?: string\n      hsl?: {h: number; s: number; l: number}\n    }) {\n      let subtitle = hex || 'No color set'\n      if (hsl) {\n        subtitle = `H:${round(hsl.h)} S:${round(hsl.s)} L:${round(hsl.l)} A:${round(alpha)}`\n      }\n      return {\n        title: title,\n        subtitle: subtitle,\n        media: () => (\n          <div\n            style={{\n              backgroundColor: hex ?? '#000',\n              opacity: alpha ?? 1,\n              position: 'absolute',\n              height: '100%',\n              width: '100%',\n              top: '0',\n              left: '0',\n            }}\n          />\n        ),\n      }\n    },\n  },\n})\n","import {defineType} from 'sanity'\n\nexport const hslaColor = defineType({\n  title: 'Hue Saturation Lightness',\n  name: 'hslaColor',\n  type: 'object',\n  fields: [\n    {name: 'h', type: 'number', title: 'Hue'},\n    {name: 's', type: 'number', title: 'Saturation'},\n    {name: 'l', type: 'number', title: 'Lightness'},\n    {name: 'a', type: 'number', title: 'Alpha'},\n  ],\n})\n","import {defineType} from 'sanity'\n\nexport const hsvaColor = defineType({\n  title: 'Hue Saturation Value',\n  name: 'hsvaColor',\n  type: 'object',\n  fields: [\n    {name: 'h', type: 'number', title: 'Hue'},\n    {name: 's', type: 'number', title: 'Saturation'},\n    {name: 'v', type: 'number', title: 'Value'},\n    {name: 'a', type: 'number', title: 'Alpha'},\n  ],\n})\n","import {defineType} from 'sanity'\n\nexport const rgbaColor = defineType({\n  title: 'Red Green Blue (rgb)',\n  name: 'rgbaColor',\n  type: 'object',\n  fields: [\n    {name: 'r', type: 'number', title: 'Red'},\n    {name: 'g', type: 'number', title: 'Green'},\n    {name: 'b', type: 'number', title: 'Blue'},\n    {name: 'a', type: 'number', title: 'Alpha'},\n  ],\n})\n","import {definePlugin} from 'sanity'\n\nimport {color, type ColorDefinition} from './schemas/color'\nimport {hslaColor} from './schemas/hslaColor'\nimport {hsvaColor} from './schemas/hsvaColor'\nimport {rgbaColor} from './schemas/rgbaColor'\n\nexport const colorInput = definePlugin({\n  name: '@sanity/color-input',\n  schema: {\n    types: [hslaColor, hsvaColor, rgbaColor, color],\n  },\n})\n\nexport {color, hslaColor, hsvaColor, rgbaColor}\nexport {ColorInput} from './LazyColorInput'\nexport type {ColorDefinition}\nexport type {ColorInputProps, ColorOptions, ColorSchemaType, ColorValue} from './types'\n"],"names":["lazy","defineType","jsx","definePlugin"],"mappings":"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"}

package/dist/index.d.cts

@@ -0,0 +1,64 @@
+import * as sanity8 from "sanity";
+import { ObjectDefinition, ObjectInputProps, ObjectOptions, ObjectSchemaType } from "sanity";
+import { Color, HSLColor, HSVColor, RGBColor } from "react-color";
+import * as react2 from "react";
+interface ColorValue {
+  hex: string;
+  hsl: HSLColor;
+  hsv: HSVColor;
+  rgb: RGBColor;
+}
+interface ColorOptions extends Omit<ObjectOptions, 'columns'> {
+  disableAlpha?: boolean;
+  colorList?: Array<Color>;
+}
+type ColorSchemaType = Omit<ObjectSchemaType, 'options'> & {
+  options?: ColorOptions;
+};
+type ColorInputProps = ObjectInputProps<ColorValue, ColorSchemaType>;
+declare const colorTypeName: "color";
+/**
+ * @public
+ */
+interface ColorDefinition extends Omit<ObjectDefinition, 'type' | 'fields' | 'options'> {
+  type: typeof colorTypeName;
+  options?: ColorOptions;
+}
+declare module 'sanity' {
+  interface IntrinsicDefinitions {
+    color: ColorDefinition;
+  }
+}
+declare const color: {
+  type: "object";
+  name: "color";
+} & Omit<ObjectDefinition, "preview"> & {
+  preview?: sanity8.PreviewConfig<{
+    title: string;
+    alpha: string;
+    hex: string;
+    hsl: string;
+  }, Record<"alpha" | "hex" | "hsl" | "title", any>>;
+};
+declare const hslaColor: {
+  type: "object";
+  name: "hslaColor";
+} & Omit<sanity8.ObjectDefinition, "preview"> & {
+  preview?: sanity8.PreviewConfig<Record<string, string>, Record<never, any>>;
+};
+declare const hsvaColor: {
+  type: "object";
+  name: "hsvaColor";
+} & Omit<sanity8.ObjectDefinition, "preview"> & {
+  preview?: sanity8.PreviewConfig<Record<string, string>, Record<never, any>>;
+};
+declare const rgbaColor: {
+  type: "object";
+  name: "rgbaColor";
+} & Omit<sanity8.ObjectDefinition, "preview"> & {
+  preview?: sanity8.PreviewConfig<Record<string, string>, Record<never, any>>;
+};
+declare function ColorInput$1(props: ObjectInputProps): react2.JSX.Element;
+declare const ColorInput: react2.LazyExoticComponent<typeof ColorInput$1>;
+declare const colorInput: sanity8.Plugin<void>;
+export { type ColorDefinition, ColorInput, type ColorInputProps, type ColorOptions, type ColorSchemaType, type ColorValue, color, colorInput, hslaColor, hsvaColor, rgbaColor };

package/dist/index.d.ts

@@ -0,0 +1,64 @@
+import * as sanity8 from "sanity";
+import { ObjectDefinition, ObjectInputProps, ObjectOptions, ObjectSchemaType } from "sanity";
+import { Color, HSLColor, HSVColor, RGBColor } from "react-color";
+import * as react2 from "react";
+interface ColorValue {
+  hex: string;
+  hsl: HSLColor;
+  hsv: HSVColor;
+  rgb: RGBColor;
+}
+interface ColorOptions extends Omit<ObjectOptions, 'columns'> {
+  disableAlpha?: boolean;
+  colorList?: Array<Color>;
+}
+type ColorSchemaType = Omit<ObjectSchemaType, 'options'> & {
+  options?: ColorOptions;
+};
+type ColorInputProps = ObjectInputProps<ColorValue, ColorSchemaType>;
+declare const colorTypeName: "color";
+/**
+ * @public
+ */
+interface ColorDefinition extends Omit<ObjectDefinition, 'type' | 'fields' | 'options'> {
+  type: typeof colorTypeName;
+  options?: ColorOptions;
+}
+declare module 'sanity' {
+  interface IntrinsicDefinitions {
+    color: ColorDefinition;
+  }
+}
+declare const color: {
+  type: "object";
+  name: "color";
+} & Omit<ObjectDefinition, "preview"> & {
+  preview?: sanity8.PreviewConfig<{
+    title: string;
+    alpha: string;
+    hex: string;
+    hsl: string;
+  }, Record<"alpha" | "hex" | "hsl" | "title", any>>;
+};
+declare const hslaColor: {
+  type: "object";
+  name: "hslaColor";
+} & Omit<sanity8.ObjectDefinition, "preview"> & {
+  preview?: sanity8.PreviewConfig<Record<string, string>, Record<never, any>>;
+};
+declare const hsvaColor: {
+  type: "object";
+  name: "hsvaColor";
+} & Omit<sanity8.ObjectDefinition, "preview"> & {
+  preview?: sanity8.PreviewConfig<Record<string, string>, Record<never, any>>;
+};
+declare const rgbaColor: {
+  type: "object";
+  name: "rgbaColor";
+} & Omit<sanity8.ObjectDefinition, "preview"> & {
+  preview?: sanity8.PreviewConfig<Record<string, string>, Record<never, any>>;
+};
+declare function ColorInput$1(props: ObjectInputProps): react2.JSX.Element;
+declare const ColorInput: react2.LazyExoticComponent<typeof ColorInput$1>;
+declare const colorInput: sanity8.Plugin<void>;
+export { type ColorDefinition, ColorInput, type ColorInputProps, type ColorOptions, type ColorSchemaType, type ColorValue, color, colorInput, hslaColor, hsvaColor, rgbaColor };

package/{lib/index.mjs → dist/index.js}

@@ -1,7 +1,7 @@
 import { defineType, definePlugin } from "sanity";
 import { jsx } from "react/jsx-runtime";
 import { lazy } from "react";
-const ColorInput = lazy(() => import("./_chunks-es/ColorInput.mjs")), round = (val = 1) => Math.round(val * 100), colorTypeName = "color", color = defineType({
+const ColorInput = lazy(() => import("./_chunks-es/ColorInput.js")), round = (val = 1) => Math.round(val * 100), colorTypeName = "color", color = defineType({
   name: colorTypeName,
   type: "object",
   title: "Color",
@@ -111,4 +111,4 @@ export {
   hsvaColor,
   rgbaColor
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/LazyColorInput.tsx","../src/schemas/color.tsx","../src/schemas/hslaColor.ts","../src/schemas/hsvaColor.ts","../src/schemas/rgbaColor.ts","../src/index.ts"],"sourcesContent":["import {lazy} from 'react'\n\nexport const ColorInput = lazy(() => import('./ColorInput'))\n","import {defineType, type ObjectDefinition} from 'sanity'\n\nimport {ColorInput} from '../LazyColorInput'\nimport {type ColorOptions} from '../types'\n\nconst round = (val: number = 1) => Math.round(val * 100)\n\nconst colorTypeName = 'color' as const\n\n/**\n * @public\n */\nexport interface ColorDefinition extends Omit<ObjectDefinition, 'type' | 'fields' | 'options'> {\n  type: typeof colorTypeName\n  options?: ColorOptions\n}\n\ndeclare module 'sanity' {\n  // makes type: 'color' narrow correctly when using defineType/defineField/defineArrayMember\n  export interface IntrinsicDefinitions {\n    color: ColorDefinition\n  }\n}\n\nexport const color = defineType({\n  name: colorTypeName,\n  type: 'object',\n  title: 'Color',\n  components: {input: ColorInput},\n  fields: [\n    {\n      title: 'Hex',\n      name: 'hex',\n      type: 'string',\n    },\n    {\n      title: 'Alpha',\n      name: 'alpha',\n      type: 'number',\n    },\n    {\n      title: 'Hue Saturation Lightness',\n      name: 'hsl',\n      type: 'hslaColor',\n    },\n    {\n      title: 'Hue Saturation Value',\n      name: 'hsv',\n      type: 'hsvaColor',\n    },\n    {\n      title: 'Red Green Blue (rgb)',\n      name: 'rgb',\n      type: 'rgbaColor',\n    },\n  ],\n  preview: {\n    select: {\n      title: 'hex',\n      alpha: 'alpha',\n      hex: 'hex',\n      hsl: 'hsl',\n    },\n    prepare({\n      title,\n      hex,\n      hsl,\n      alpha,\n    }: {\n      title: string\n      alpha?: number\n      hex?: string\n      hsl?: {h: number; s: number; l: number}\n    }) {\n      let subtitle = hex || 'No color set'\n      if (hsl) {\n        subtitle = `H:${round(hsl.h)} S:${round(hsl.s)} L:${round(hsl.l)} A:${round(alpha)}`\n      }\n      return {\n        title: title,\n        subtitle: subtitle,\n        media: () => (\n          <div\n            style={{\n              backgroundColor: hex ?? '#000',\n              opacity: alpha ?? 1,\n              position: 'absolute',\n              height: '100%',\n              width: '100%',\n              top: '0',\n              left: '0',\n            }}\n          />\n        ),\n      }\n    },\n  },\n})\n","import {defineType} from 'sanity'\n\nexport const hslaColor = defineType({\n  title: 'Hue Saturation Lightness',\n  name: 'hslaColor',\n  type: 'object',\n  fields: [\n    {name: 'h', type: 'number', title: 'Hue'},\n    {name: 's', type: 'number', title: 'Saturation'},\n    {name: 'l', type: 'number', title: 'Lightness'},\n    {name: 'a', type: 'number', title: 'Alpha'},\n  ],\n})\n","import {defineType} from 'sanity'\n\nexport const hsvaColor = defineType({\n  title: 'Hue Saturation Value',\n  name: 'hsvaColor',\n  type: 'object',\n  fields: [\n    {name: 'h', type: 'number', title: 'Hue'},\n    {name: 's', type: 'number', title: 'Saturation'},\n    {name: 'v', type: 'number', title: 'Value'},\n    {name: 'a', type: 'number', title: 'Alpha'},\n  ],\n})\n","import {defineType} from 'sanity'\n\nexport const rgbaColor = defineType({\n  title: 'Red Green Blue (rgb)',\n  name: 'rgbaColor',\n  type: 'object',\n  fields: [\n    {name: 'r', type: 'number', title: 'Red'},\n    {name: 'g', type: 'number', title: 'Green'},\n    {name: 'b', type: 'number', title: 'Blue'},\n    {name: 'a', type: 'number', title: 'Alpha'},\n  ],\n})\n","import {definePlugin} from 'sanity'\n\nimport {color, type ColorDefinition} from './schemas/color'\nimport {hslaColor} from './schemas/hslaColor'\nimport {hsvaColor} from './schemas/hsvaColor'\nimport {rgbaColor} from './schemas/rgbaColor'\n\nexport const colorInput = definePlugin({\n  name: '@sanity/color-input',\n  schema: {\n    types: [hslaColor, hsvaColor, rgbaColor, color],\n  },\n})\n\nexport {color, hslaColor, hsvaColor, rgbaColor}\nexport {ColorInput} from './LazyColorInput'\nexport type {ColorDefinition}\nexport type {ColorInputProps, ColorOptions, ColorSchemaType, ColorValue} from './types'\n"],"names":[],"mappings":"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"}