@sanity/color-input 4.0.7 → 5.0.1

package/dist/_chunks-cjs/ColorInput.cjs

@@ -1,337 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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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"}

package/dist/index.cjs

@@ -1,114 +0,0 @@
-"use strict";
-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.cjs");
-})), round = (val = 1) => Math.round(val * 100), colorTypeName = "color", color = sanity.defineType({
-  name: colorTypeName,
-  type: "object",
-  title: "Color",
-  components: { input: ColorInput },
-  fields: [
-    {
-      title: "Hex",
-      name: "hex",
-      type: "string"
-    },
-    {
-      title: "Alpha",
-      name: "alpha",
-      type: "number"
-    },
-    {
-      title: "Hue Saturation Lightness",
-      name: "hsl",
-      type: "hslaColor"
-    },
-    {
-      title: "Hue Saturation Value",
-      name: "hsv",
-      type: "hsvaColor"
-    },
-    {
-      title: "Red Green Blue (rgb)",
-      name: "rgb",
-      type: "rgbaColor"
-    }
-  ],
-  preview: {
-    select: {
-      title: "hex",
-      alpha: "alpha",
-      hex: "hex",
-      hsl: "hsl"
-    },
-    prepare({
-      title,
-      hex,
-      hsl,
-      alpha
-    }) {
-      let subtitle = hex || "No color set";
-      return hsl && (subtitle = `H:${round(hsl.h)} S:${round(hsl.s)} L:${round(hsl.l)} A:${round(alpha)}`), {
-        title,
-        subtitle,
-        media: () => /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            style: {
-              backgroundColor: hex ?? "#000",
-              opacity: alpha ?? 1,
-              position: "absolute",
-              height: "100%",
-              width: "100%",
-              top: "0",
-              left: "0"
-            }
-          }
-        )
-      };
-    }
-  }
-}), hslaColor = sanity.defineType({
-  title: "Hue Saturation Lightness",
-  name: "hslaColor",
-  type: "object",
-  fields: [
-    { name: "h", type: "number", title: "Hue" },
-    { name: "s", type: "number", title: "Saturation" },
-    { name: "l", type: "number", title: "Lightness" },
-    { name: "a", type: "number", title: "Alpha" }
-  ]
-}), hsvaColor = sanity.defineType({
-  title: "Hue Saturation Value",
-  name: "hsvaColor",
-  type: "object",
-  fields: [
-    { name: "h", type: "number", title: "Hue" },
-    { name: "s", type: "number", title: "Saturation" },
-    { name: "v", type: "number", title: "Value" },
-    { name: "a", type: "number", title: "Alpha" }
-  ]
-}), rgbaColor = sanity.defineType({
-  title: "Red Green Blue (rgb)",
-  name: "rgbaColor",
-  type: "object",
-  fields: [
-    { name: "r", type: "number", title: "Red" },
-    { name: "g", type: "number", title: "Green" },
-    { name: "b", type: "number", title: "Blue" },
-    { name: "a", type: "number", title: "Alpha" }
-  ]
-}), colorInput = sanity.definePlugin({
-  name: "@sanity/color-input",
-  schema: {
-    types: [hslaColor, hsvaColor, rgbaColor, color]
-  }
-});
-exports.ColorInput = ColorInput;
-exports.color = color;
-exports.colorInput = colorInput;
-exports.hslaColor = hslaColor;
-exports.hsvaColor = hsvaColor;
-exports.rgbaColor = rgbaColor;
-//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +0,0 @@
-{"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

@@ -1,64 +0,0 @@
-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 };