@sanity/color-input 3.0.0-v3-studio.7 → 3.0.0-v3-studio.9

package/LICENSE

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

package/README.md

@@ -1,7 +1,7 @@
 # @sanity/color-input
 
-> **NOTE** 
-> 
+> **NOTE**
+>
 > This is the **Sanity Studio v3 version** of @sanity/color-input.
 > 
 > For the v2 version, please refer to the [v2-branch](https://github.com/sanity-io/sanity/tree/next/packages/%40sanity/color-input).
@@ -111,7 +111,6 @@ Which will render accordingly:
 
 MIT-licensed. See LICENSE.
 
-
 ## Develop & test
 
 This plugin uses [@sanity/plugin-kit](https://github.com/sanity-io/plugin-kit)

package/lib/index.esm.js

@@ -0,0 +1,2 @@
+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 o(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}import{defineType as a,set as i,setIfMissing as s,unset as c,definePlugin as h}from"sanity";import{jsxs as d,jsx as u,Fragment as p}from"react/jsx-runtime";import{useMemo as b,useCallback as g,useRef as m,useState as f,useEffect as y}from"react";import{debounce as v}from"lodash";import{useTheme as x,Flex as O,Box as C,Card as w,Stack as j,Text as S,Inline as z,Button as A}from"@sanity/ui";import{TrashIcon as L,AddIcon as P}from"@sanity/icons";import{EditableInput as H,Saturation as M,Hue as k,Alpha as R,Checkboard as B}from"react-color/lib/components/common";import{CustomPicker as D}from"react-color";import N from"styled-components";import{isValidHex as T}from"react-color/lib/helpers/color";const G=a({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"}]}),V=a({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"}]}),_=e=>{let{onChange:t,rgb:n,hsl:l,hex:r,disableAlpha:o}=e;var a;const{sanity:i}=x(),s=b((()=>({input:{width:"80%",padding:"4px 10% 3px",border:"none",boxShadow:"inset 0 0 0 1px ".concat(i.color.input.default.enabled.border),color:i.color.input.default.enabled.fg,backgroundColor:i.color.input.default.enabled.bg,fontSize:i.fonts.text.sizes[0].fontSize,textAlign:"center"},label:{display:"block",textAlign:"center",fontSize:i.fonts.label.sizes[0].fontSize,color:i.color.base.fg,paddingTop:"3px",paddingBottom:"4px",textTransform:"capitalize"}})),[i]),c=g((e=>{if("hex"in e&&e.hex&&T(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 d(O,{children:[u(C,{flex:2,marginRight:1,children:u(H,{style:s,label:"hex",value:null==r?void 0:r.replace("#",""),onChange:c})}),u(C,{flex:1,marginRight:1,children:u(H,{style:s,label:"r",value:null==n?void 0:n.r,onChange:c,dragLabel:!0,dragMax:255})}),u(C,{flex:1,marginRight:1,children:u(H,{style:s,label:"g",value:null==n?void 0:n.g,onChange:c,dragLabel:!0,dragMax:255})}),u(C,{flex:1,marginRight:1,children:u(H,{style:s,label:"b",value:null==n?void 0:n.b,onChange:c,dragLabel:!0,dragMax:255})}),!o&&u(C,{flex:1,children:u(H,{style:s,label:"a",value:Math.round(100*(null!=(a=null==n?void 0:n.a)?a:1)),onChange:c,dragLabel:!0,dragMax:100})})]})},E=N(C)(e||(e=o(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"]))),U=N(O)(t||(t=o(["\n  margin-top: 6rem;\n  background-color: var(--card-bg-color);\n  position: relative;\n  width: 100%;\n"]))),W=D((e=>{var t,n,l;const{width:r,color:{rgb:o,hex:a,hsv:i,hsl:s},onChange:c,onUnset:h,disableAlpha:b,readOnly:g}=e;return u("div",{style:{width:r},children:u(w,{padding:1,border:!0,radius:1,children:d(j,{space:2,children:[!g&&d(p,{children:[u(w,{overflow:"hidden",style:{position:"relative",height:"5em"},children:u(M,{onChange:c,hsl:s,hsv:i})}),u(w,{shadow:1,radius:3,overflow:"hidden",style:{position:"relative",height:"10px"},children:u(k,{hsl:s,onChange:!g&&c})}),!b&&u(w,{shadow:1,radius:3,overflow:"hidden",style:{position:"relative",height:"10px"},children:u(R,{rgb:o,hsl:s,onChange:c})})]}),d(O,{children:[d(w,{flex:1,radius:2,overflow:"hidden",style:{position:"relative",minWidth:"4em"},children:[u(B,{}),u(E,{style:{backgroundColor:"rgba(".concat(null==o?void 0:o.r,",").concat(null==o?void 0:o.g,",").concat(null==o?void 0:o.b,",").concat(null==o?void 0:o.a,")")}}),g&&u(U,{padding:2,paddingBottom:1,sizing:"border",justify:"space-between",children:d(j,{space:3,marginTop:1,children:[u(S,{size:3,weight:"bold",children:a}),d(z,{space:3,children:[d(S,{size:1,children:[u("strong",{children:"RGB: "}),null==o?void 0:o.r," ",null==o?void 0:o.g," ",null==o?void 0:o.b]}),d(S,{size:1,children:[u("strong",{children:"HSL: "})," ",Math.round(null!=(t=null==s?void 0:s.h)?t:0)," ",Math.round(null!=(n=null==s?void 0:s.s)?n:0),"%"," ",Math.round(null!=(l=null==s?void 0:s.l)?l:0)]})]})]})})]}),!g&&d(O,{align:"flex-start",marginLeft:2,children:[u(C,{style:{width:200},children:u(_,{rgb:o,hsl:s,hex:a,onChange:c,disableAlpha:b})}),u(C,{marginLeft:2,children:u(A,{onClick:h,title:"Delete color",icon:L,tone:"critical"})})]})]})]})})})})),q={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 F(e){var t;const{onChange:n,schemaType:l,readOnly:r,value:o}=e,a=m(null),[h,d]=f(o);y((()=>d(o)),[o]);const x=g((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 i(l?Object.assign({_type:t.type.name},n):n,[t.name])}));n([s({_type:l.name}),i(l.name,["_type"]),i(null==(t=e.rgb)?void 0:t.a,["alpha"]),...r])}),[n,l]),O=b((()=>v(x,100)),[x]),C=g((e=>{d(e),O(e)}),[O,d]),w=g((()=>{d(q),x(q)}),[x]),j=g((()=>{d(void 0),n(c())}),[n]);return u(p,{children:o?u(W,{color:h,onChange:C,readOnly:r||"boolean"==typeof l.readOnly&&l.readOnly,disableAlpha:!!(null==(t=l.options)?void 0:t.disableAlpha),onUnset:j}):u(A,{icon:P,mode:"ghost",text:"Create color",ref:a,disabled:Boolean(r),onClick:w})})}const I=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;return Math.round(100*e)},J=a(l(l({name:"color",type:"object",title:"Color"},{components:{input:F}}),{},{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,o=n||"No color set";return l&&(o="H:".concat(I(l.h)," S:").concat(I(l.s)," L:").concat(I(l.l)," A:").concat(I(r))),{title:t,subtitle:o,media:()=>u("div",{style:{backgroundColor:null!=n?n:"#000",opacity:null!=r?r:1,position:"absolute",height:"100%",width:"100%",top:"0",left:"0"}})}}}})),K=a({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"}]}),Q=h({name:"@sanity/color-input",schema:{types:[G,K,V,J]}});export{F as ColorInput,J as color,Q as colorInput,G as hslaColor,K as hsvaColor,V as rgbaColor};
+//# sourceMappingURL=index.esm.js.map

package/lib/index.esm.js.map

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

package/lib/index.js

@@ -0,0 +1,2 @@
+"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 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"})})]})]})]})})})})),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;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.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  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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"}

package/lib/src/index.d.ts

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

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@sanity/color-input",
-  "version": "3.0.0-v3-studio.7",
+  "version": "3.0.0-v3-studio.9",
   "description": "Color input",
+  "author": "Sanity.io <hello@sanity.io>",
+  "license": "MIT",
   "scripts": {
     "clean": "rimraf lib",
-    "prebuild": "npm run clean && plugin-kit verify-package --silent",
-    "build": "parcel build --no-cache",
-    "watch": "parcel watch",
+    "prebuild": "npm run clean && plugin-kit verify-package --silent && pkg-utils",
+    "build": "pkg-utils build",
+    "watch": "pkg-utils watch",
     "link-watch": "plugin-kit link-watch",
     "prepublishOnly": "npm run build",
     "compile": "tsc --noEmit",
@@ -17,21 +19,22 @@
   "source": "./src/index.ts",
   "exports": {
     ".": {
-      "require": "./lib/cjs/index.js",
-      "default": "./lib/esm/index.js"
+      "types": "./lib/src/index.d.ts",
+      "source": "./src/index.ts",
+      "import": "./lib/index.esm.js",
+      "require": "./lib/index.js",
+      "default": "./lib/index.js"
     }
   },
-  "main": "./lib/cjs/index.js",
-  "module": "./lib/esm/index.js",
-  "types": "./lib/types/index.d.ts",
+  "main": "./lib/index.js",
+  "module": "./lib/index.esm.js",
+  "types": "./lib/src/index.d.ts",
   "files": [
     "src",
     "lib",
     "v2-incompatible.js",
     "sanity.json"
   ],
-  "author": "Sanity.io <hello@sanity.io>",
-  "license": "MIT",
   "keywords": [
     "sanity",
     "cms",
@@ -44,51 +47,52 @@
   "dependencies": {
     "@sanity/icons": "^1.2.8",
     "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/ui": "^0.38.2",
+    "@sanity/ui": "^1.0.0-beta.32",
     "lodash": "^4.17.21",
     "react-color": "^2.19.3"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.1.2",
-    "@commitlint/config-conventional": "^17.1.0",
+    "@commitlint/cli": "^17.2.0",
+    "@commitlint/config-conventional": "^17.2.0",
     "@parcel/packager-ts": "^2.6.0",
     "@parcel/transformer-typescript-types": "^2.6.0",
-    "@sanity/plugin-kit": "^1.1.0-ecosystem-preset.5",
-    "@sanity/semantic-release-preset": "^2.0.1",
+    "@sanity/pkg-utils": "^1.16.2",
+    "@sanity/plugin-kit": "^2.0.2",
+    "@sanity/semantic-release-preset": "^2.0.2",
     "@types/react-color": "^2.17.6",
     "@types/styled-components": "^5.1.25",
-    "@typescript-eslint/eslint-plugin": "^5.12.0",
-    "@typescript-eslint/parser": "^5.12.0",
-    "eslint": "^8.7.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-sanity": "^5.1.0",
-    "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.5.0",
+    "@typescript-eslint/eslint-plugin": "^5.42.0",
+    "@typescript-eslint/parser": "^5.42.0",
+    "eslint": "^8.26.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-sanity": "^6.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3",
     "parcel": "^2.6.0",
-    "prettier": "^2.6.2",
+    "prettier": "^2.7.1",
     "react": "^18.0.0",
     "rimraf": "^3.0.2",
-    "sanity": "3.0.0-dev-preview.22",
+    "sanity": "3.0.0-rc.0",
     "semantic-release": "^19.0.3",
     "styled-components": "^5.2.0",
-    "typescript": "4.7.4"
+    "typescript": "^4.8.4"
   },
   "peerDependencies": {
     "react": "^18.0.0",
-    "sanity": "dev-preview",
+    "sanity": "dev-preview || 3.0.0-rc.0",
     "styled-components": "^5.2.0"
   },
   "bugs": {
     "url": "https://github.com/sanity-io/color-input/issues"
   },
-  "homepage": "https://www.sanity.io/",
+  "homepage": "https://github.com/sanity-io/color-input#readme",
   "sanityExchangeUrl": "https://www.sanity.io/plugins/color-input",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/sanity-io/color-input.git"
+    "url": "git@github.com:sanity-io/color-input.git"
   },
   "publishConfig": {
     "access": "public"

package/src/index.ts

@@ -1,10 +1,10 @@
-import {createPlugin} from 'sanity'
+import {definePlugin} from 'sanity'
 import {hslaColor} from './schemas/hslaColor'
 import {rgbaColor} from './schemas/rgbaColor'
 import {color, ColorDefinition} from './schemas/color'
 import {hsvaColor} from './schemas/hsvaColor'
 
-export const colorInput = createPlugin({
+export const colorInput = definePlugin({
   name: '@sanity/color-input',
   schema: {
     types: [hslaColor, hsvaColor, rgbaColor, color],

package/src/schemas/color.tsx

@@ -25,7 +25,7 @@ export const color = defineType({
   name: colorTypeName,
   type: 'object',
   title: 'Color',
-  components: {input: ColorInput},
+  ...({components: {input: ColorInput}} as {}), //TODO revert this change when sanity 3.0.0-rc.1 is released
   fields: [
     {
       title: 'Hex',