@sanity/color-input 3.0.0 → 3.0.2

package/lib/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/schemas/hslaColor.ts","../src/schemas/rgbaColor.ts","../src/ColorPickerFields.tsx","../src/ColorPicker.tsx","../src/ColorInput.tsx","../src/schemas/color.tsx","../src/schemas/hsvaColor.ts","../src/index.ts"],"sourcesContent":["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 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 React, {useCallback, useMemo} from 'react'\n// @ts-expect-error missing export\nimport {isValidHex} from 'react-color/lib/helpers/color'\nimport {EditableInput} from 'react-color/lib/components/common'\nimport {Box, Flex, useTheme} from '@sanity/ui'\nimport {ColorChangeHandler, HEXColor, HSLColor, HSVColor, RGBColor} from 'react-color'\nimport {EditableInputStyles} from 'react-color/lib/components/common/EditableInput'\n\ninterface ColorPickerFieldsProps {\n  rgb?: RGBColor\n  hsl?: HSLColor\n  hex?: string\n  disableAlpha: boolean\n  onChange: ColorChangeHandler<HSLColor | HSVColor | RGBColor | HEXColor>\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 React from 'react'\nimport {Alpha, Checkboard, Hue, Saturation} from 'react-color/lib/components/common'\nimport {CustomPicker, HEXColor, HSLColor, HSVColor, RGBColor} from 'react-color'\nimport {Box, Button, Card, Flex, Inline, Stack, Text} from '@sanity/ui'\nimport {TrashIcon} from '@sanity/icons'\nimport styled from 'styled-components'\nimport {ColorPickerFields} from './ColorPickerFields'\nimport {CustomPickerInjectedProps} from 'react-color/lib/components/common/ColorWrap'\nimport {ColorValue} from './ColorInput'\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\nexport interface ColorPickerProps\n  extends CustomPickerInjectedProps<HSLColor | HSVColor | RGBColor | HEXColor> {\n  width?: string\n  disableAlpha: boolean\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    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'}}\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'}}\n            >\n              <Checkboard />\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)} {Math.round(hsl?.s ?? 0)}%{' '}\n                        {Math.round(hsl?.l ?? 0)}\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        </Stack>\n      </Card>\n    </div>\n  )\n}\n\nexport const ColorPicker = CustomPicker(ColorPickerInner)\n","import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'\nimport {ObjectOptions, set, setIfMissing, unset} from 'sanity'\nimport {debounce} from 'lodash'\nimport {Button} from '@sanity/ui'\nimport {AddIcon} from '@sanity/icons'\nimport {ColorPicker} from './ColorPicker'\nimport {ObjectInputProps} from 'sanity'\nimport {HSLColor, HSVColor, RGBColor} from 'react-color'\nimport {ObjectSchemaType} from 'sanity'\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 interface ColorValue {\n  hex: string\n  hsl: HSLColor\n  hsv: HSVColor\n  rgb: RGBColor\n}\n\nexport interface ColorOptions extends Omit<ObjectOptions, 'columns'> {\n  disableAlpha?: boolean\n}\n\nexport type ColorSchemaType = Omit<ObjectSchemaType, 'options'> & {\n  options?: ColorOptions\n}\nexport type ColorInputProps = ObjectInputProps<ColorValue, ColorSchemaType>\n\nexport function ColorInput(props: ColorInputProps) {\n  const {onChange, schemaType: type, readOnly, value} = props\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  useEffect(() => setColor(value), [value])\n\n  const emitSetColor = useCallback(\n    (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    [onChange, type]\n  )\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  const debouncedColorChange = useMemo(() => debounce(emitSetColor, 100), [emitSetColor])\n  const handleColorChange = useCallback(\n    (nextColor: ColorValue) => {\n      setColor(nextColor)\n      debouncedColorChange(nextColor)\n    },\n    [debouncedColorChange, setColor]\n  )\n\n  const handleCreateColor = useCallback(() => {\n    setColor(DEFAULT_COLOR)\n    emitSetColor(DEFAULT_COLOR)\n  }, [emitSetColor])\n\n  const handleUnset = useCallback(() => {\n    setColor(undefined)\n    onChange(unset())\n  }, [onChange])\n\n  return (\n    <>\n      {value ? (\n        <ColorPicker\n          /*            ref={this.focusRef}*/\n          color={color}\n          onChange={handleColorChange}\n          readOnly={readOnly || (typeof type.readOnly === 'boolean' && type.readOnly)}\n          disableAlpha={!!type.options?.disableAlpha}\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","import React from 'react'\nimport {ColorInput, ColorOptions} from '../ColorInput'\nimport {defineType, ObjectDefinition} from 'sanity'\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/types' {\n  // makes type: 'color' narrow correctly when using defineTyp/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}} as {}), //TODO revert this change when sanity 3.0.0-rc.1 is released\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 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 {definePlugin} from 'sanity'\nimport {hslaColor} from './schemas/hslaColor'\nimport {rgbaColor} from './schemas/rgbaColor'\nimport {color, ColorDefinition} from './schemas/color'\nimport {hsvaColor} from './schemas/hsvaColor'\n\nexport const colorInput = definePlugin({\n  name: '@sanity/color-input',\n  schema: {\n    types: [hslaColor, hsvaColor, rgbaColor, color],\n  },\n})\n\nexport {hslaColor, rgbaColor, color, hsvaColor}\nexport {ColorInput} from './ColorInput'\nexport type {ColorDefinition}\nexport type {ColorValue, ColorInputProps, ColorOptions, ColorSchemaType} from './ColorInput'\n"],"names":["hslaColor","defineType","title","name","type","fields","rgbaColor","ColorPickerFields","_ref","onChange","rgb","hsl","hex","disableAlpha","_a","sanity","useTheme","inputStyles","useMemo","input","width","padding","border","boxShadow","color","default","enabled","fg","backgroundColor","bg","fontSize","fonts","text","sizes","textAlign","label","display","base","paddingTop","paddingBottom","textTransform","handleChange","useCallback","data","isValidHex","source","r","g","b","Number","a","alpha","h","s","l","jsxs","Flex","children","jsx","Box","flex","marginRight","EditableInput","style","value","replace","dragLabel","dragMax","Math","round","ColorBox","styled","_templateObject","_taggedTemplateLiteral","ReadOnlyContainer","_templateObject2","ColorPicker","CustomPicker","props","_b","_c","hsv","onUnset","readOnly","Card","radius","Stack","space","Fragment","overflow","position","height","Saturation","shadow","Hue","Alpha","minWidth","Checkboard","concat","sizing","justify","marginTop","Text","size","weight","Inline","align","marginLeft","Button","onClick","icon","TrashIcon","tone","DEFAULT_COLOR","v","ColorInput","schemaType","focusRef","useRef","setColor","useState","useEffect","emitSetColor","nextColor","fieldPatches","filter","field","map","nextFieldValue","isObject","jsonType","set","Object","assign","_type","setIfMissing","debouncedColorChange","debounce","handleColorChange","handleCreateColor","handleUnset","unset","options","AddIcon","mode","ref","disabled","Boolean","val","_objectSpread","components","preview","select","prepare","_ref2","subtitle","media","opacity","top","left","hsvaColor","colorInput","definePlugin","schema","types"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../src/schemas/hslaColor.ts","../src/schemas/rgbaColor.ts","../src/ColorPickerFields.tsx","../src/ColorPicker.tsx","../src/ColorInput.tsx","../src/schemas/color.tsx","../src/schemas/hsvaColor.ts","../src/index.ts"],"sourcesContent":["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 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 React, {useCallback, useMemo} from 'react'\n// @ts-expect-error missing export\nimport {isValidHex} from 'react-color/lib/helpers/color'\nimport {EditableInput} from 'react-color/lib/components/common'\nimport {Box, Flex, useTheme} from '@sanity/ui'\nimport {ColorChangeHandler, HEXColor, HSLColor, HSVColor, RGBColor} from 'react-color'\nimport {EditableInputStyles} from 'react-color/lib/components/common/EditableInput'\n\ninterface ColorPickerFieldsProps {\n  rgb?: RGBColor\n  hsl?: HSLColor\n  hex?: string\n  disableAlpha: boolean\n  onChange: ColorChangeHandler<HSLColor | HSVColor | RGBColor | HEXColor>\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 React from 'react'\nimport {Alpha, Checkboard, Hue, Saturation} from 'react-color/lib/components/common'\nimport {CustomPicker, HEXColor, HSLColor, HSVColor, RGBColor} from 'react-color'\nimport {Box, Button, Card, Flex, Inline, Stack, Text} from '@sanity/ui'\nimport {TrashIcon} from '@sanity/icons'\nimport styled from 'styled-components'\nimport {ColorPickerFields} from './ColorPickerFields'\nimport {CustomPickerInjectedProps} from 'react-color/lib/components/common/ColorWrap'\nimport {ColorValue} from './ColorInput'\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\nexport interface ColorPickerProps\n  extends CustomPickerInjectedProps<HSLColor | HSVColor | RGBColor | HEXColor> {\n  width?: string\n  disableAlpha: boolean\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    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'}}\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'}}\n            >\n              <Checkboard />\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)} {Math.round(hsl?.s ?? 0)}%{' '}\n                        {Math.round(hsl?.l ?? 0)}\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        </Stack>\n      </Card>\n    </div>\n  )\n}\n\nexport const ColorPicker = CustomPicker(ColorPickerInner)\n","import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'\nimport {ObjectOptions, set, setIfMissing, unset} from 'sanity'\nimport {debounce} from 'lodash'\nimport {Button} from '@sanity/ui'\nimport {AddIcon} from '@sanity/icons'\nimport {ColorPicker} from './ColorPicker'\nimport {ObjectInputProps} from 'sanity'\nimport {HSLColor, HSVColor, RGBColor} from 'react-color'\nimport {ObjectSchemaType} from 'sanity'\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 interface ColorValue {\n  hex: string\n  hsl: HSLColor\n  hsv: HSVColor\n  rgb: RGBColor\n}\n\nexport interface ColorOptions extends Omit<ObjectOptions, 'columns'> {\n  disableAlpha?: boolean\n}\n\nexport type ColorSchemaType = Omit<ObjectSchemaType, 'options'> & {\n  options?: ColorOptions\n}\nexport type ColorInputProps = ObjectInputProps<ColorValue, ColorSchemaType>\n\nexport 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  useEffect(() => setColor(value), [value])\n\n  const emitSetColor = useCallback(\n    (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    [onChange, type]\n  )\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  const debouncedColorChange = useMemo(() => debounce(emitSetColor, 100), [emitSetColor])\n  const handleColorChange = useCallback(\n    (nextColor: ColorValue) => {\n      setColor(nextColor)\n      debouncedColorChange(nextColor)\n    },\n    [debouncedColorChange, setColor]\n  )\n\n  const handleCreateColor = useCallback(() => {\n    setColor(DEFAULT_COLOR)\n    emitSetColor(DEFAULT_COLOR)\n  }, [emitSetColor])\n\n  const handleUnset = useCallback(() => {\n    setColor(undefined)\n    onChange(unset())\n  }, [onChange])\n\n  return (\n    <>\n      {value && value.hex ? (\n        <ColorPicker\n          /*            ref={this.focusRef}*/\n          color={color}\n          onChange={handleColorChange}\n          readOnly={readOnly || (typeof type.readOnly === 'boolean' && type.readOnly)}\n          disableAlpha={!!type.options?.disableAlpha}\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","import React from 'react'\nimport {ColorInput, ColorOptions} from '../ColorInput'\nimport {defineType, ObjectDefinition} from 'sanity'\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/types' {\n  // makes type: 'color' narrow correctly when using defineTyp/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 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 {definePlugin} from 'sanity'\nimport {hslaColor} from './schemas/hslaColor'\nimport {rgbaColor} from './schemas/rgbaColor'\nimport {color, ColorDefinition} from './schemas/color'\nimport {hsvaColor} from './schemas/hsvaColor'\n\nexport const colorInput = definePlugin({\n  name: '@sanity/color-input',\n  schema: {\n    types: [hslaColor, hsvaColor, rgbaColor, color],\n  },\n})\n\nexport {hslaColor, rgbaColor, color, hsvaColor}\nexport {ColorInput} from './ColorInput'\nexport type {ColorDefinition}\nexport type {ColorValue, ColorInputProps, ColorOptions, ColorSchemaType} from './ColorInput'\n"],"names":["hslaColor","defineType","title","name","type","fields","rgbaColor","ColorPickerFields","onChange","rgb","hsl","hex","disableAlpha","_a","sanity","useTheme","inputStyles","useMemo","input","width","padding","border","boxShadow","color","default","enabled","fg","backgroundColor","bg","fontSize","fonts","text","sizes","textAlign","label","display","base","paddingTop","paddingBottom","textTransform","handleChange","useCallback","data","isValidHex","source","r","g","b","Number","a","alpha","h","s","l","jsxs","Flex","children","jsx","Box","flex","marginRight","EditableInput","style","value","replace","dragLabel","dragMax","Math","round","ColorBox","styled","ReadOnlyContainer","ColorPickerInner","props","_b","_c","hsv","onUnset","readOnly","Card","radius","Stack","space","Fragment","overflow","position","height","Saturation","shadow","Hue","Alpha","minWidth","Checkboard","sizing","justify","marginTop","Text","size","weight","Inline","align","marginLeft","Button","onClick","icon","TrashIcon","tone","ColorPicker","CustomPicker","DEFAULT_COLOR","v","ColorInput","schemaType","focusRef","useRef","setColor","useState","useEffect","emitSetColor","nextColor","fieldPatches","filter","field","map","nextFieldValue","isObject","jsonType","set","Object","assign","_type","setIfMissing","debouncedColorChange","debounce","handleColorChange","handleCreateColor","handleUnset","unset","options","AddIcon","mode","ref","disabled","Boolean","val","colorTypeName","components","preview","select","prepare","subtitle","media","opacity","top","left","hsvaColor","colorInput","definePlugin","schema","types"],"mappings":"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"}

package/lib/index.js

@@ -1,2 +1,506 @@
-"use strict";var e,t;function n(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);t&&(l=l.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,l)}return n}function l(e){for(var t=1;t<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{};t%2?n(Object(l),!0).forEach((function(t){r(e,t,l[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(l)):n(Object(l)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(l,t))}))}return e}function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}Object.defineProperty(exports,"__esModule",{value:!0});var o=require("sanity"),i=require("react/jsx-runtime"),s=require("react"),u=require("lodash"),c=require("@sanity/ui"),d=require("@sanity/icons"),h=require("react-color/lib/components/common"),p=require("react-color"),b=require("styled-components"),x=require("react-color/lib/helpers/color");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=g(b);const f=o.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"}]}),y=o.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"}]}),j=e=>{let{onChange:t,rgb:n,hsl:l,hex:r,disableAlpha:a}=e;var o;const{sanity:u}=c.useTheme(),d=s.useMemo((()=>({input:{width:"80%",padding:"4px 10% 3px",border:"none",boxShadow:"inset 0 0 0 1px ".concat(u.color.input.default.enabled.border),color:u.color.input.default.enabled.fg,backgroundColor:u.color.input.default.enabled.bg,fontSize:u.fonts.text.sizes[0].fontSize,textAlign:"center"},label:{display:"block",textAlign:"center",fontSize:u.fonts.label.sizes[0].fontSize,color:u.color.base.fg,paddingTop:"3px",paddingBottom:"4px",textTransform:"capitalize"}})),[u]),p=s.useCallback((e=>{if("hex"in e&&e.hex&&x.isValidHex(e.hex))t({hex:e.hex,source:"hex"});else if(n&&("r"in e&&e.r||"g"in e&&e.g||"b"in e&&e.b))t({r:Number(e.r)||n.r,g:Number(e.g)||n.g,b:Number(e.b)||n.b,a:n.a,source:"rgb"});else if(l&&"a"in e&&e.a){let n=Number(e.a);n<0?n=0:n>100&&(n=100),n/=100,t({h:l.h,s:l.s,l:l.l,a:n,source:"hsl"})}}),[t,l,n]);return i.jsxs(c.Flex,{children:[i.jsx(c.Box,{flex:2,marginRight:1,children:i.jsx(h.EditableInput,{style:d,label:"hex",value:null==r?void 0:r.replace("#",""),onChange:p})}),i.jsx(c.Box,{flex:1,marginRight:1,children:i.jsx(h.EditableInput,{style:d,label:"r",value:null==n?void 0:n.r,onChange:p,dragLabel:!0,dragMax:255})}),i.jsx(c.Box,{flex:1,marginRight:1,children:i.jsx(h.EditableInput,{style:d,label:"g",value:null==n?void 0:n.g,onChange:p,dragLabel:!0,dragMax:255})}),i.jsx(c.Box,{flex:1,marginRight:1,children:i.jsx(h.EditableInput,{style:d,label:"b",value:null==n?void 0:n.b,onChange:p,dragLabel:!0,dragMax:255})}),!a&&i.jsx(c.Box,{flex:1,children:i.jsx(h.EditableInput,{style:d,label:"a",value:Math.round(100*(null!=(o=null==n?void 0:n.a)?o:1)),onChange:p,dragLabel:!0,dragMax:100})})]})},v=m.default(c.Box)(e||(e=a(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"]))),C=m.default(c.Flex)(t||(t=a(["\n  margin-top: 6rem;\n  background-color: var(--card-bg-color);\n  position: relative;\n  width: 100%;\n"]))),O=p.CustomPicker((e=>{var t,n,l;const{width:r,color:{rgb:a,hex:o,hsv:s,hsl:u},onChange:p,onUnset:b,disableAlpha:x,readOnly:g}=e;return u&&s?i.jsx("div",{style:{width:r},children:i.jsx(c.Card,{padding:1,border:!0,radius:1,children:i.jsxs(c.Stack,{space:2,children:[!g&&i.jsxs(i.Fragment,{children:[i.jsx(c.Card,{overflow:"hidden",style:{position:"relative",height:"5em"},children:i.jsx(h.Saturation,{onChange:p,hsl:u,hsv:s})}),i.jsx(c.Card,{shadow:1,radius:3,overflow:"hidden",style:{position:"relative",height:"10px"},children:i.jsx(h.Hue,{hsl:u,onChange:!g&&p})}),!x&&i.jsx(c.Card,{shadow:1,radius:3,overflow:"hidden",style:{position:"relative",height:"10px"},children:i.jsx(h.Alpha,{rgb:a,hsl:u,onChange:p})})]}),i.jsxs(c.Flex,{children:[i.jsxs(c.Card,{flex:1,radius:2,overflow:"hidden",style:{position:"relative",minWidth:"4em"},children:[i.jsx(h.Checkboard,{}),i.jsx(v,{style:{backgroundColor:"rgba(".concat(null==a?void 0:a.r,",").concat(null==a?void 0:a.g,",").concat(null==a?void 0:a.b,",").concat(null==a?void 0:a.a,")")}}),g&&i.jsx(C,{padding:2,paddingBottom:1,sizing:"border",justify:"space-between",children:i.jsxs(c.Stack,{space:3,marginTop:1,children:[i.jsx(c.Text,{size:3,weight:"bold",children:o}),i.jsxs(c.Inline,{space:3,children:[i.jsxs(c.Text,{size:1,children:[i.jsx("strong",{children:"RGB: "}),null==a?void 0:a.r," ",null==a?void 0:a.g," ",null==a?void 0:a.b]}),i.jsxs(c.Text,{size:1,children:[i.jsx("strong",{children:"HSL: "})," ",Math.round(null!=(t=null==u?void 0:u.h)?t:0)," ",Math.round(null!=(n=null==u?void 0:u.s)?n:0),"%"," ",Math.round(null!=(l=null==u?void 0:u.l)?l:0)]})]})]})})]}),!g&&i.jsxs(c.Flex,{align:"flex-start",marginLeft:2,children:[i.jsx(c.Box,{style:{width:200},children:i.jsx(j,{rgb:a,hsl:u,hex:o,onChange:p,disableAlpha:x})}),i.jsx(c.Box,{marginLeft:2,children:i.jsx(c.Button,{onClick:b,title:"Delete color",icon:d.TrashIcon,tone:"critical"})})]})]})]})})}):null})),w={hex:"#24a3e3",hsl:{h:200,s:.7732,l:.5156,a:1},hsv:{h:200,s:.8414,v:.8901,a:1},rgb:{r:46,g:163,b:227,a:1},source:"hex"};function S(e){var t;const{onChange:n,schemaType:l,readOnly:r,value:a}=e,h=s.useRef(null),[p,b]=s.useState(a);s.useEffect((()=>b(a)),[a]);const x=s.useCallback((e=>{var t;const r=l.fields.filter((t=>t.name in e)).map((t=>{const n=e[t.name],l="object"===t.type.jsonType;return o.set(l?Object.assign({_type:t.type.name},n):n,[t.name])}));n([o.setIfMissing({_type:l.name}),o.set(l.name,["_type"]),o.set(null==(t=e.rgb)?void 0:t.a,["alpha"]),...r])}),[n,l]),g=s.useMemo((()=>u.debounce(x,100)),[x]),m=s.useCallback((e=>{b(e),g(e)}),[g,b]),f=s.useCallback((()=>{b(w),x(w)}),[x]),y=s.useCallback((()=>{b(void 0),n(o.unset())}),[n]);return i.jsx(i.Fragment,{children:a?i.jsx(O,{color:p,onChange:m,readOnly:r||"boolean"==typeof l.readOnly&&l.readOnly,disableAlpha:!!(null==(t=l.options)?void 0:t.disableAlpha),onUnset:y}):i.jsx(c.Button,{icon:d.AddIcon,mode:"ghost",text:"Create color",ref:h,disabled:Boolean(r),onClick:f})})}const k=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;return Math.round(100*e)},B=o.defineType(l(l({name:"color",type:"object",title:"Color"},{components:{input:S}}),{},{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(e){let{title:t,hex:n,hsl:l,alpha:r}=e,a=n||"No color set";return l&&(a="H:".concat(k(l.h)," S:").concat(k(l.s)," L:").concat(k(l.l)," A:").concat(k(r))),{title:t,subtitle:a,media:()=>i.jsx("div",{style:{backgroundColor:null!=n?n:"#000",opacity:null!=r?r:1,position:"absolute",height:"100%",width:"100%",top:"0",left:"0"}})}}}})),A=o.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"}]}),T=o.definePlugin({name:"@sanity/color-input",schema:{types:[f,A,y,B]}});exports.ColorInput=S,exports.color=B,exports.colorInput=T,exports.hslaColor=f,exports.hsvaColor=A,exports.rgbaColor=y;
+'use strict';
+
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var sanity = require('sanity');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var lodash = require('lodash');
+var ui = require('@sanity/ui');
+var icons = require('@sanity/icons');
+var common = require('react-color/lib/components/common');
+var reactColor = require('react-color');
+var styled = require('styled-components');
+var color$1 = require('react-color/lib/helpers/color');
+function _interopDefaultCompat(e) {
+  return e && typeof e === 'object' && 'default' in e ? e : {
+    default: e
+  };
+}
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+const 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"
+  }]
+});
+const 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"
+  }]
+});
+const ColorPickerFields = _ref => {
+  let {
+    onChange,
+    rgb,
+    hsl,
+    hex,
+    disableAlpha
+  } = _ref;
+  var _a;
+  const {
+    sanity
+  } = ui.useTheme();
+  const inputStyles = react.useMemo(() => ({
+    input: {
+      width: "80%",
+      padding: "4px 10% 3px",
+      border: "none",
+      boxShadow: "inset 0 0 0 1px ".concat(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]);
+  const handleChange = react.useCallback(data => {
+    if ("hex" in data && data.hex && color$1.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);
+      if (alpha < 0) {
+        alpha = 0;
+      } else if (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 == null ? void 0 : 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 == null ? void 0 : rgb.r,
+        onChange: handleChange,
+        dragLabel: true,
+        dragMax: 255
+      })
+    }), /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+      flex: 1,
+      marginRight: 1,
+      children: /* @__PURE__ */jsxRuntime.jsx(common.EditableInput, {
+        style: inputStyles,
+        label: "g",
+        value: rgb == null ? void 0 : rgb.g,
+        onChange: handleChange,
+        dragLabel: true,
+        dragMax: 255
+      })
+    }), /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+      flex: 1,
+      marginRight: 1,
+      children: /* @__PURE__ */jsxRuntime.jsx(common.EditableInput, {
+        style: inputStyles,
+        label: "b",
+        value: rgb == null ? void 0 : rgb.b,
+        onChange: handleChange,
+        dragLabel: true,
+        dragMax: 255
+      })
+    }), !disableAlpha && /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+      flex: 1,
+      children: /* @__PURE__ */jsxRuntime.jsx(common.EditableInput, {
+        style: inputStyles,
+        label: "a",
+        value: Math.round(((_a = rgb == null ? void 0 : rgb.a) != null ? _a : 1) * 100),
+        onChange: handleChange,
+        dragLabel: true,
+        dragMax: 100
+      })
+    })]
+  });
+};
+const ColorBox = styled__default.default(ui.Box)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
+const ReadOnlyContainer = styled__default.default(ui.Flex)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-top: 6rem;\n  background-color: var(--card-bg-color);\n  position: relative;\n  width: 100%;\n"])));
+const ColorPickerInner = props => {
+  var _a, _b, _c;
+  const {
+    width,
+    color: {
+      rgb,
+      hex,
+      hsv,
+      hsl
+    },
+    onChange,
+    onUnset,
+    disableAlpha,
+    readOnly
+  } = props;
+  if (!hsl || !hsv) {
+    return null;
+  }
+  return /* @__PURE__ */jsxRuntime.jsx("div", {
+    style: {
+      width
+    },
+    children: /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
+      padding: 1,
+      border: true,
+      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"
+            },
+            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"
+            },
+            children: [/* @__PURE__ */jsxRuntime.jsx(common.Checkboard, {}), /* @__PURE__ */jsxRuntime.jsx(ColorBox, {
+              style: {
+                backgroundColor: "rgba(".concat(rgb == null ? void 0 : rgb.r, ",").concat(rgb == null ? void 0 : rgb.g, ",").concat(rgb == null ? void 0 : rgb.b, ",").concat(rgb == null ? void 0 : 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 == null ? void 0 : rgb.r, " ", rgb == null ? void 0 : rgb.g, " ", rgb == null ? void 0 : rgb.b]
+                  }), /* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
+                    size: 1,
+                    children: [/* @__PURE__ */jsxRuntime.jsx("strong", {
+                      children: "HSL: "
+                    }), " ", Math.round((_a = hsl == null ? void 0 : hsl.h) != null ? _a : 0), " ", Math.round((_b = hsl == null ? void 0 : hsl.s) != null ? _b : 0), "%", " ", Math.round((_c = hsl == null ? void 0 : hsl.l) != null ? _c : 0)]
+                  })]
+                })]
+              })
+            })]
+          }), !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"
+              })
+            })]
+          })]
+        })]
+      })
+    })
+  });
+};
+const ColorPicker = reactColor.CustomPicker(ColorPickerInner);
+const 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) {
+  var _a;
+  const {
+    onChange,
+    readOnly
+  } = props;
+  const value = props.value;
+  const type = props.schemaType;
+  const focusRef = react.useRef(null);
+  const [color, setColor] = react.useState(value);
+  react.useEffect(() => setColor(value), [value]);
+  const emitSetColor = react.useCallback(nextColor => {
+    var _a2;
+    const fieldPatches = type.fields.filter(field => field.name in nextColor).map(field => {
+      const nextFieldValue = nextColor[field.name];
+      const 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((_a2 = nextColor.rgb) == null ? void 0 : _a2.a, ["alpha"]), ...fieldPatches]);
+  }, [onChange, type]);
+  const debouncedColorChange = react.useMemo(() => lodash.debounce(emitSetColor, 100), [emitSetColor]);
+  const handleColorChange = react.useCallback(nextColor => {
+    setColor(nextColor);
+    debouncedColorChange(nextColor);
+  }, [debouncedColorChange, setColor]);
+  const handleCreateColor = react.useCallback(() => {
+    setColor(DEFAULT_COLOR);
+    emitSetColor(DEFAULT_COLOR);
+  }, [emitSetColor]);
+  const 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,
+      onChange: handleColorChange,
+      readOnly: readOnly || typeof type.readOnly === "boolean" && type.readOnly,
+      disableAlpha: !!((_a = type.options) == null ? void 0 : _a.disableAlpha),
+      onUnset: handleUnset
+    }) : /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+      icon: icons.AddIcon,
+      mode: "ghost",
+      text: "Create color",
+      ref: focusRef,
+      disabled: Boolean(readOnly),
+      onClick: handleCreateColor
+    })
+  });
+}
+const round = function () {
+  let val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+  return Math.round(val * 100);
+};
+const colorTypeName = "color";
+const 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(_ref2) {
+      let {
+        title,
+        hex,
+        hsl,
+        alpha
+      } = _ref2;
+      let subtitle = hex || "No color set";
+      if (hsl) {
+        subtitle = "H:".concat(round(hsl.h), " S:").concat(round(hsl.s), " L:").concat(round(hsl.l), " A:").concat(round(alpha));
+      }
+      return {
+        title,
+        subtitle,
+        media: () => /* @__PURE__ */jsxRuntime.jsx("div", {
+          style: {
+            backgroundColor: hex != null ? hex : "#000",
+            opacity: alpha != null ? alpha : 1,
+            position: "absolute",
+            height: "100%",
+            width: "100%",
+            top: "0",
+            left: "0"
+          }
+        })
+      };
+    }
+  }
+});
+const 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"
+  }]
+});
+const 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.js.map