@sanity/color-input 3.0.0-v3-studio.11 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +3 -6
  2. package/lib/index.esm.js +1 -1
  3. package/lib/index.esm.js.map +1 -1
  4. package/lib/index.js +1 -1
  5. package/lib/index.js.map +1 -1
  6. package/package.json +46 -47
  7. package/src/ColorPicker.tsx +5 -0
package/README.md CHANGED
@@ -1,9 +1,6 @@
1
1
  # @sanity/color-input
2
2
 
3
- > **NOTE**
4
- >
5
- > This is the **Sanity Studio v3 version** of @sanity/color-input.
6
- >
3
+ > This is a **Sanity Studio v3** plugin.
7
4
  > For the v2 version, please refer to the [v2-branch](https://github.com/sanity-io/sanity/tree/next/packages/%40sanity/color-input).
8
5
 
9
6
  ## What is it?
@@ -14,13 +11,13 @@ Color input plugin for [Sanity](https://sanity.io/) that stores selected colors
14
11
 
15
12
  ## Installation
16
13
  ```
17
- npm install --save @sanity/color-input@studio-v3
14
+ npm install --save @sanity/color-input
18
15
  ```
19
16
 
20
17
  or
21
18
 
22
19
  ```
23
- yarn add @sanity/color-input@studio-v3
20
+ yarn add @sanity/color-input
24
21
  ```
25
22
 
26
23
  ## Usage
package/lib/index.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- 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};
1
+ 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 s&&i?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"})})]})]})]})})}):null})),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};
2
2
  //# sourceMappingURL=index.esm.js.map
package/lib/index.esm.js.map CHANGED
@@ -1 +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 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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"}
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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"}
package/lib/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "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;
1
+ "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;
2
2
  //# sourceMappingURL=index.js.map
package/lib/index.js.map CHANGED
@@ -1 +1 @@
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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"}
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\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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"}
package/package.json CHANGED
@@ -1,22 +1,26 @@
1
1
  {
2
2
  "name": "@sanity/color-input",
3
- "version": "3.0.0-v3-studio.11",
3
+ "version": "3.0.0",
4
4
  "description": "Color input",
5
- "author": "Sanity.io <hello@sanity.io>",
6
- "license": "MIT",
7
- "scripts": {
8
- "clean": "rimraf lib",
9
- "prebuild": "npm run clean && plugin-kit verify-package --silent && pkg-utils",
10
- "build": "pkg-utils build",
11
- "watch": "pkg-utils watch",
12
- "link-watch": "plugin-kit link-watch",
13
- "prepublishOnly": "npm run build",
14
- "compile": "tsc --noEmit",
15
- "lint": "eslint .",
16
- "format": "prettier src -w",
17
- "prepare": "husky install"
5
+ "keywords": [
6
+ "sanity",
7
+ "cms",
8
+ "headless",
9
+ "realtime",
10
+ "content",
11
+ "color-input",
12
+ "sanity-plugin"
13
+ ],
14
+ "homepage": "https://github.com/sanity-io/color-input#readme",
15
+ "bugs": {
16
+ "url": "https://github.com/sanity-io/color-input/issues"
18
17
  },
19
- "source": "./src/index.ts",
18
+ "repository": {
19
+ "type": "git",
20
+ "url": "git@github.com:sanity-io/color-input.git"
21
+ },
22
+ "license": "MIT",
23
+ "author": "Sanity.io <hello@sanity.io>",
20
24
  "exports": {
21
25
  ".": {
22
26
  "types": "./lib/src/index.d.ts",
@@ -24,10 +28,12 @@
24
28
  "import": "./lib/index.esm.js",
25
29
  "require": "./lib/index.js",
26
30
  "default": "./lib/index.esm.js"
27
- }
31
+ },
32
+ "./package.json": "./package.json"
28
33
  },
29
34
  "main": "./lib/index.js",
30
35
  "module": "./lib/index.esm.js",
36
+ "source": "./src/index.ts",
31
37
  "types": "./lib/src/index.d.ts",
32
38
  "files": [
33
39
  "src",
@@ -35,29 +41,30 @@
35
41
  "v2-incompatible.js",
36
42
  "sanity.json"
37
43
  ],
38
- "keywords": [
39
- "sanity",
40
- "cms",
41
- "headless",
42
- "realtime",
43
- "content",
44
- "color-input",
45
- "sanity-plugin"
46
- ],
44
+ "scripts": {
45
+ "prebuild": "npm run clean && plugin-kit verify-package --silent && pkg-utils",
46
+ "build": "pkg-utils build --strict",
47
+ "clean": "rimraf lib",
48
+ "compile": "tsc --noEmit",
49
+ "format": "prettier src -w",
50
+ "link-watch": "plugin-kit link-watch",
51
+ "lint": "eslint .",
52
+ "prepare": "husky install",
53
+ "prepublishOnly": "npm run build",
54
+ "watch": "pkg-utils watch"
55
+ },
47
56
  "dependencies": {
48
- "@sanity/icons": "1.3.6",
57
+ "@sanity/icons": "^2.0.0",
49
58
  "@sanity/incompatible-plugin": "^1.0.4",
50
- "@sanity/ui": "1.0.0-next.3",
59
+ "@sanity/ui": "^1.0.0",
51
60
  "lodash": "^4.17.21",
52
61
  "react-color": "^2.19.3"
53
62
  },
54
63
  "devDependencies": {
55
64
  "@commitlint/cli": "^17.2.0",
56
65
  "@commitlint/config-conventional": "^17.2.0",
57
- "@parcel/packager-ts": "^2.6.0",
58
- "@parcel/transformer-typescript-types": "^2.6.0",
59
- "@sanity/pkg-utils": "^1.16.2",
60
- "@sanity/plugin-kit": "^2.0.2",
66
+ "@sanity/pkg-utils": "^1.17.2",
67
+ "@sanity/plugin-kit": "^2.1.2",
61
68
  "@sanity/semantic-release-preset": "^2.0.2",
62
69
  "@types/react-color": "^2.17.6",
63
70
  "@types/styled-components": "^5.1.25",
@@ -71,33 +78,25 @@
71
78
  "eslint-plugin-react-hooks": "^4.6.0",
72
79
  "husky": "^8.0.1",
73
80
  "lint-staged": "^13.0.3",
74
- "parcel": "^2.6.0",
75
81
  "prettier": "^2.7.1",
76
- "react": "^18.0.0",
82
+ "prettier-plugin-packagejson": "^2.3.0",
83
+ "react": "^18",
77
84
  "rimraf": "^3.0.2",
78
- "sanity": "3.0.0-rc.0",
85
+ "sanity": "^3.0.0",
79
86
  "semantic-release": "^19.0.3",
80
87
  "styled-components": "^5.2.0",
81
88
  "typescript": "^4.8.4"
82
89
  },
83
90
  "peerDependencies": {
84
- "react": "^18.0.0",
85
- "sanity": "dev-preview || 3.0.0-rc.0",
91
+ "react": "^18",
92
+ "sanity": "^3.0.0",
86
93
  "styled-components": "^5.2.0"
87
94
  },
88
- "bugs": {
89
- "url": "https://github.com/sanity-io/color-input/issues"
90
- },
91
- "homepage": "https://github.com/sanity-io/color-input#readme",
92
- "sanityExchangeUrl": "https://www.sanity.io/plugins/color-input",
93
- "repository": {
94
- "type": "git",
95
- "url": "git@github.com:sanity-io/color-input.git"
95
+ "engines": {
96
+ "node": ">=14"
96
97
  },
97
98
  "publishConfig": {
98
99
  "access": "public"
99
100
  },
100
- "engines": {
101
- "node": ">=14.0.0"
102
- }
101
+ "sanityExchangeUrl": "https://www.sanity.io/plugins/color-input"
103
102
  }
package/src/ColorPicker.tsx CHANGED
@@ -41,6 +41,11 @@ const ColorPickerInner = (props: ColorPickerProps) => {
41
41
  disableAlpha,
42
42
  readOnly,
43
43
  } = props
44
+
45
+ if (!hsl || !hsv) {
46
+ return null
47
+ }
48
+
44
49
  return (
45
50
  <div style={{width}}>
46
51
  <Card padding={1} border radius={1}>