@sanity/color-input 3.0.0 → 3.0.1

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 (8) hide show
  1. package/lib/index.esm.js +1 -1
  2. package/lib/index.esm.js.map +1 -1
  3. package/lib/index.js +1 -1
  4. package/lib/index.js.map +1 -1
  5. package/lib/src/index.d.ts +5 -5
  6. package/package.json +3 -3
  7. package/src/ColorInput.tsx +5 -3
  8. package/src/schemas/color.tsx +1 -1
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 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};
1
+ var e,l;function n(e,l){return l||(l=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(l)}}))}import{defineType as t,set as o,setIfMissing as a,unset as r,definePlugin as i}from"sanity";import{jsxs as h,jsx as d,Fragment as s}from"react/jsx-runtime";import{useMemo as c,useCallback as u,useRef as p,useState as b,useEffect as m}from"react";import{debounce as g}from"lodash";import{useTheme as y,Flex as f,Box as v,Card as x,Stack as C,Text as w,Inline as z,Button as S}from"@sanity/ui";import{TrashIcon as j,AddIcon as A}from"@sanity/icons";import{EditableInput as L,Saturation as H,Hue as M,Alpha as O,Checkboard as R}from"react-color/lib/components/common";import{CustomPicker as k}from"react-color";import B from"styled-components";import{isValidHex as N}from"react-color/lib/helpers/color";const T=t({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"}]}),G=t({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"}]}),V=e=>{let{onChange:l,rgb:n,hsl:t,hex:o,disableAlpha:a}=e;var r;const{sanity:i}=y(),s=c((()=>({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]),p=u((e=>{if("hex"in e&&e.hex&&N(e.hex))l({hex:e.hex,source:"hex"});else if(n&&("r"in e&&e.r||"g"in e&&e.g||"b"in e&&e.b))l({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(t&&"a"in e&&e.a){let n=Number(e.a);n<0?n=0:n>100&&(n=100),n/=100,l({h:t.h,s:t.s,l:t.l,a:n,source:"hsl"})}}),[l,t,n]);return h(f,{children:[d(v,{flex:2,marginRight:1,children:d(L,{style:s,label:"hex",value:null==o?void 0:o.replace("#",""),onChange:p})}),d(v,{flex:1,marginRight:1,children:d(L,{style:s,label:"r",value:null==n?void 0:n.r,onChange:p,dragLabel:!0,dragMax:255})}),d(v,{flex:1,marginRight:1,children:d(L,{style:s,label:"g",value:null==n?void 0:n.g,onChange:p,dragLabel:!0,dragMax:255})}),d(v,{flex:1,marginRight:1,children:d(L,{style:s,label:"b",value:null==n?void 0:n.b,onChange:p,dragLabel:!0,dragMax:255})}),!a&&d(v,{flex:1,children:d(L,{style:s,label:"a",value:Math.round(100*(null!=(r=null==n?void 0:n.a)?r:1)),onChange:p,dragLabel:!0,dragMax:100})})]})},_=B(v)(e||(e=n(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"]))),U=B(f)(l||(l=n(["\n margin-top: 6rem;\n background-color: var(--card-bg-color);\n position: relative;\n width: 100%;\n"]))),D=k((e=>{var l,n,t;const{width:o,color:{rgb:a,hex:r,hsv:i,hsl:c},onChange:u,onUnset:p,disableAlpha:b,readOnly:m}=e;return c&&i?d("div",{style:{width:o},children:d(x,{padding:1,border:!0,radius:1,children:h(C,{space:2,children:[!m&&h(s,{children:[d(x,{overflow:"hidden",style:{position:"relative",height:"5em"},children:d(H,{onChange:u,hsl:c,hsv:i})}),d(x,{shadow:1,radius:3,overflow:"hidden",style:{position:"relative",height:"10px"},children:d(M,{hsl:c,onChange:!m&&u})}),!b&&d(x,{shadow:1,radius:3,overflow:"hidden",style:{position:"relative",height:"10px"},children:d(O,{rgb:a,hsl:c,onChange:u})})]}),h(f,{children:[h(x,{flex:1,radius:2,overflow:"hidden",style:{position:"relative",minWidth:"4em"},children:[d(R,{}),d(_,{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,")")}}),m&&d(U,{padding:2,paddingBottom:1,sizing:"border",justify:"space-between",children:h(C,{space:3,marginTop:1,children:[d(w,{size:3,weight:"bold",children:r}),h(z,{space:3,children:[h(w,{size:1,children:[d("strong",{children:"RGB: "}),null==a?void 0:a.r," ",null==a?void 0:a.g," ",null==a?void 0:a.b]}),h(w,{size:1,children:[d("strong",{children:"HSL: "})," ",Math.round(null!=(l=null==c?void 0:c.h)?l:0)," ",Math.round(null!=(n=null==c?void 0:c.s)?n:0),"%"," ",Math.round(null!=(t=null==c?void 0:c.l)?t:0)]})]})]})})]}),!m&&h(f,{align:"flex-start",marginLeft:2,children:[d(v,{style:{width:200},children:d(V,{rgb:a,hsl:c,hex:r,onChange:u,disableAlpha:b})}),d(v,{marginLeft:2,children:d(S,{onClick:p,title:"Delete color",icon:j,tone:"critical"})})]})]})]})})}):null})),P={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 W(e){var l;const{onChange:n,readOnly:t}=e,i=e.value,h=e.schemaType,y=p(null),[f,v]=b(i);m((()=>v(i)),[i]);const x=u((e=>{var l;const t=h.fields.filter((l=>l.name in e)).map((l=>{const n=e[l.name],t="object"===l.type.jsonType;return o(t?Object.assign({_type:l.type.name},n):n,[l.name])}));n([a({_type:h.name}),o(h.name,["_type"]),o(null==(l=e.rgb)?void 0:l.a,["alpha"]),...t])}),[n,h]),C=c((()=>g(x,100)),[x]),w=u((e=>{v(e),C(e)}),[C,v]),z=u((()=>{v(P),x(P)}),[x]),j=u((()=>{v(void 0),n(r())}),[n]);return d(s,{children:i&&i.hex?d(D,{color:f,onChange:w,readOnly:t||"boolean"==typeof h.readOnly&&h.readOnly,disableAlpha:!!(null==(l=h.options)?void 0:l.disableAlpha),onUnset:j}):d(S,{icon:A,mode:"ghost",text:"Create color",ref:y,disabled:Boolean(t),onClick:z})})}const q=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;return Math.round(100*e)},E=t({name:"color",type:"object",title:"Color",components:{input:W},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:l,hex:n,hsl:t,alpha:o}=e,a=n||"No color set";return t&&(a="H:".concat(q(t.h)," S:").concat(q(t.s)," L:").concat(q(t.l)," A:").concat(q(o))),{title:l,subtitle:a,media:()=>d("div",{style:{backgroundColor:null!=n?n:"#000",opacity:null!=o?o:1,position:"absolute",height:"100%",width:"100%",top:"0",left:"0"}})}}}}),F=t({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"}]}),I=i({name:"@sanity/color-input",schema:{types:[T,F,G,E]}});export{W as ColorInput,E as color,I as colorInput,T as hslaColor,F as hsvaColor,G 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\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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"}
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: ObjectInputProps) {\n const {onChange, readOnly} = props\n const value = props.value as ColorValue | undefined\n const type = props.schemaType as ColorSchemaType\n const focusRef = useRef<HTMLButtonElement>(null)\n\n // use local state so we can have instant ui updates while debouncing patch emits\n const [color, setColor] = useState(value)\n useEffect(() => setColor(value), [value])\n\n const emitSetColor = useCallback(\n (nextColor: ColorValue) => {\n const fieldPatches = type.fields\n .filter((field) => field.name in nextColor)\n .map((field) => {\n const nextFieldValue = nextColor[field.name as keyof ColorValue]\n const isObject = field.type.jsonType === 'object'\n return set(\n isObject ? Object.assign({_type: field.type.name}, nextFieldValue) : nextFieldValue,\n [field.name]\n )\n })\n\n onChange([\n setIfMissing({_type: type.name}),\n set(type.name, ['_type']),\n set(nextColor.rgb?.a, ['alpha']),\n ...fieldPatches,\n ])\n },\n [onChange, type]\n )\n\n // The color picker emits onChange events continuously while the user is sliding the\n // hue/saturation/alpha selectors. This debounces the event to avoid excessive patches\n const debouncedColorChange = useMemo(() => debounce(emitSetColor, 100), [emitSetColor])\n const handleColorChange = useCallback(\n (nextColor: ColorValue) => {\n setColor(nextColor)\n debouncedColorChange(nextColor)\n },\n [debouncedColorChange, setColor]\n )\n\n const handleCreateColor = useCallback(() => {\n setColor(DEFAULT_COLOR)\n emitSetColor(DEFAULT_COLOR)\n }, [emitSetColor])\n\n const handleUnset = useCallback(() => {\n setColor(undefined)\n onChange(unset())\n }, [onChange])\n\n return (\n <>\n {value && value.hex ? (\n <ColorPicker\n /* ref={this.focusRef}*/\n color={color}\n onChange={handleColorChange}\n readOnly={readOnly || (typeof type.readOnly === 'boolean' && type.readOnly)}\n disableAlpha={!!type.options?.disableAlpha}\n onUnset={handleUnset}\n />\n ) : (\n <Button\n icon={AddIcon}\n mode=\"ghost\"\n text=\"Create color\"\n ref={focusRef}\n disabled={Boolean(readOnly)}\n onClick={handleCreateColor}\n />\n )}\n </>\n )\n}\n","import React from 'react'\nimport {ColorInput, ColorOptions} from '../ColorInput'\nimport {defineType, ObjectDefinition} from 'sanity'\n\nconst round = (val: number = 1) => Math.round(val * 100)\n\nconst colorTypeName = 'color' as const\n\n/**\n * @public\n */\nexport interface ColorDefinition extends Omit<ObjectDefinition, 'type' | 'fields' | 'options'> {\n type: typeof colorTypeName\n options?: ColorOptions\n}\n\ndeclare module '@sanity/types' {\n // makes type: 'color' narrow correctly when using defineTyp/defineField/defineArrayMember\n export interface IntrinsicDefinitions {\n color: ColorDefinition\n }\n}\n\nexport const color = defineType({\n name: colorTypeName,\n type: 'object',\n title: 'Color',\n components: {input: ColorInput},\n fields: [\n {\n title: 'Hex',\n name: 'hex',\n type: 'string',\n },\n {\n title: 'Alpha',\n name: 'alpha',\n type: 'number',\n },\n {\n title: 'Hue Saturation Lightness',\n name: 'hsl',\n type: 'hslaColor',\n },\n {\n title: 'Hue Saturation Value',\n name: 'hsv',\n type: 'hsvaColor',\n },\n {\n title: 'Red Green Blue (rgb)',\n name: 'rgb',\n type: 'rgbaColor',\n },\n ],\n preview: {\n select: {\n title: 'hex',\n alpha: 'alpha',\n hex: 'hex',\n hsl: 'hsl',\n },\n prepare({\n title,\n hex,\n hsl,\n alpha,\n }: {\n title?: string\n alpha?: number\n hex?: string\n hsl?: {h: number; s: number; l: number}\n }) {\n let subtitle = hex || 'No color set'\n if (hsl) {\n subtitle = `H:${round(hsl.h)} S:${round(hsl.s)} L:${round(hsl.l)} A:${round(alpha)}`\n }\n return {\n title: title,\n subtitle: subtitle,\n media: () => (\n <div\n style={{\n backgroundColor: hex ?? '#000',\n opacity: alpha ?? 1,\n position: 'absolute',\n height: '100%',\n width: '100%',\n top: '0',\n left: '0',\n }}\n />\n ),\n }\n },\n },\n})\n","import {defineType} from 'sanity'\n\nexport const hsvaColor = defineType({\n title: 'Hue Saturation Value',\n name: 'hsvaColor',\n type: 'object',\n fields: [\n {name: 'h', type: 'number', title: 'Hue'},\n {name: 's', type: 'number', title: 'Saturation'},\n {name: 'v', type: 'number', title: 'Value'},\n {name: 'a', type: 'number', title: 'Alpha'},\n ],\n})\n","import {definePlugin} from 'sanity'\nimport {hslaColor} from './schemas/hslaColor'\nimport {rgbaColor} from './schemas/rgbaColor'\nimport {color, ColorDefinition} from './schemas/color'\nimport {hsvaColor} from './schemas/hsvaColor'\n\nexport const colorInput = definePlugin({\n name: '@sanity/color-input',\n schema: {\n types: [hslaColor, hsvaColor, rgbaColor, color],\n },\n})\n\nexport {hslaColor, rgbaColor, color, hsvaColor}\nexport {ColorInput} from './ColorInput'\nexport type {ColorDefinition}\nexport type {ColorValue, ColorInputProps, ColorOptions, ColorSchemaType} from './ColorInput'\n"],"names":["hslaColor","defineType","title","name","type","fields","rgbaColor","ColorPickerFields","_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","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 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;
1
+ "use strict";var e,l;function t(e,l){return l||(l=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(l)}}))}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("sanity"),a=require("react/jsx-runtime"),r=require("react"),o=require("lodash"),i=require("@sanity/ui"),s=require("@sanity/icons"),d=require("react-color/lib/components/common"),u=require("react-color"),h=require("styled-components"),c=require("react-color/lib/helpers/color");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=p(h);const b=n.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"}]}),g=n.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"}]}),m=e=>{let{onChange:l,rgb:t,hsl:n,hex:o,disableAlpha:s}=e;var u;const{sanity:h}=i.useTheme(),p=r.useMemo((()=>({input:{width:"80%",padding:"4px 10% 3px",border:"none",boxShadow:"inset 0 0 0 1px ".concat(h.color.input.default.enabled.border),color:h.color.input.default.enabled.fg,backgroundColor:h.color.input.default.enabled.bg,fontSize:h.fonts.text.sizes[0].fontSize,textAlign:"center"},label:{display:"block",textAlign:"center",fontSize:h.fonts.label.sizes[0].fontSize,color:h.color.base.fg,paddingTop:"3px",paddingBottom:"4px",textTransform:"capitalize"}})),[h]),x=r.useCallback((e=>{if("hex"in e&&e.hex&&c.isValidHex(e.hex))l({hex:e.hex,source:"hex"});else if(t&&("r"in e&&e.r||"g"in e&&e.g||"b"in e&&e.b))l({r:Number(e.r)||t.r,g:Number(e.g)||t.g,b:Number(e.b)||t.b,a:t.a,source:"rgb"});else if(n&&"a"in e&&e.a){let t=Number(e.a);t<0?t=0:t>100&&(t=100),t/=100,l({h:n.h,s:n.s,l:n.l,a:t,source:"hsl"})}}),[l,n,t]);return a.jsxs(i.Flex,{children:[a.jsx(i.Box,{flex:2,marginRight:1,children:a.jsx(d.EditableInput,{style:p,label:"hex",value:null==o?void 0:o.replace("#",""),onChange:x})}),a.jsx(i.Box,{flex:1,marginRight:1,children:a.jsx(d.EditableInput,{style:p,label:"r",value:null==t?void 0:t.r,onChange:x,dragLabel:!0,dragMax:255})}),a.jsx(i.Box,{flex:1,marginRight:1,children:a.jsx(d.EditableInput,{style:p,label:"g",value:null==t?void 0:t.g,onChange:x,dragLabel:!0,dragMax:255})}),a.jsx(i.Box,{flex:1,marginRight:1,children:a.jsx(d.EditableInput,{style:p,label:"b",value:null==t?void 0:t.b,onChange:x,dragLabel:!0,dragMax:255})}),!s&&a.jsx(i.Box,{flex:1,children:a.jsx(d.EditableInput,{style:p,label:"a",value:Math.round(100*(null!=(u=null==t?void 0:t.a)?u:1)),onChange:x,dragLabel:!0,dragMax:100})})]})},y=x.default(i.Box)(e||(e=t(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"]))),f=x.default(i.Flex)(l||(l=t(["\n margin-top: 6rem;\n background-color: var(--card-bg-color);\n position: relative;\n width: 100%;\n"]))),j=u.CustomPicker((e=>{var l,t,n;const{width:r,color:{rgb:o,hex:u,hsv:h,hsl:c},onChange:p,onUnset:x,disableAlpha:b,readOnly:g}=e;return c&&h?a.jsx("div",{style:{width:r},children:a.jsx(i.Card,{padding:1,border:!0,radius:1,children:a.jsxs(i.Stack,{space:2,children:[!g&&a.jsxs(a.Fragment,{children:[a.jsx(i.Card,{overflow:"hidden",style:{position:"relative",height:"5em"},children:a.jsx(d.Saturation,{onChange:p,hsl:c,hsv:h})}),a.jsx(i.Card,{shadow:1,radius:3,overflow:"hidden",style:{position:"relative",height:"10px"},children:a.jsx(d.Hue,{hsl:c,onChange:!g&&p})}),!b&&a.jsx(i.Card,{shadow:1,radius:3,overflow:"hidden",style:{position:"relative",height:"10px"},children:a.jsx(d.Alpha,{rgb:o,hsl:c,onChange:p})})]}),a.jsxs(i.Flex,{children:[a.jsxs(i.Card,{flex:1,radius:2,overflow:"hidden",style:{position:"relative",minWidth:"4em"},children:[a.jsx(d.Checkboard,{}),a.jsx(y,{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&&a.jsx(f,{padding:2,paddingBottom:1,sizing:"border",justify:"space-between",children:a.jsxs(i.Stack,{space:3,marginTop:1,children:[a.jsx(i.Text,{size:3,weight:"bold",children:u}),a.jsxs(i.Inline,{space:3,children:[a.jsxs(i.Text,{size:1,children:[a.jsx("strong",{children:"RGB: "}),null==o?void 0:o.r," ",null==o?void 0:o.g," ",null==o?void 0:o.b]}),a.jsxs(i.Text,{size:1,children:[a.jsx("strong",{children:"HSL: "})," ",Math.round(null!=(l=null==c?void 0:c.h)?l:0)," ",Math.round(null!=(t=null==c?void 0:c.s)?t:0),"%"," ",Math.round(null!=(n=null==c?void 0:c.l)?n:0)]})]})]})})]}),!g&&a.jsxs(i.Flex,{align:"flex-start",marginLeft:2,children:[a.jsx(i.Box,{style:{width:200},children:a.jsx(m,{rgb:o,hsl:c,hex:u,onChange:p,disableAlpha:b})}),a.jsx(i.Box,{marginLeft:2,children:a.jsx(i.Button,{onClick:x,title:"Delete color",icon:s.TrashIcon,tone:"critical"})})]})]})]})})}):null})),v={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 C(e){var l;const{onChange:t,readOnly:d}=e,u=e.value,h=e.schemaType,c=r.useRef(null),[p,x]=r.useState(u);r.useEffect((()=>x(u)),[u]);const b=r.useCallback((e=>{var l;const a=h.fields.filter((l=>l.name in e)).map((l=>{const t=e[l.name],a="object"===l.type.jsonType;return n.set(a?Object.assign({_type:l.type.name},t):t,[l.name])}));t([n.setIfMissing({_type:h.name}),n.set(h.name,["_type"]),n.set(null==(l=e.rgb)?void 0:l.a,["alpha"]),...a])}),[t,h]),g=r.useMemo((()=>o.debounce(b,100)),[b]),m=r.useCallback((e=>{x(e),g(e)}),[g,x]),y=r.useCallback((()=>{x(v),b(v)}),[b]),f=r.useCallback((()=>{x(void 0),t(n.unset())}),[t]);return a.jsx(a.Fragment,{children:u&&u.hex?a.jsx(j,{color:p,onChange:m,readOnly:d||"boolean"==typeof h.readOnly&&h.readOnly,disableAlpha:!!(null==(l=h.options)?void 0:l.disableAlpha),onUnset:f}):a.jsx(i.Button,{icon:s.AddIcon,mode:"ghost",text:"Create color",ref:c,disabled:Boolean(d),onClick:y})})}const w=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;return Math.round(100*e)},B=n.defineType({name:"color",type:"object",title:"Color",components:{input:C},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:l,hex:t,hsl:n,alpha:r}=e,o=t||"No color set";return n&&(o="H:".concat(w(n.h)," S:").concat(w(n.s)," L:").concat(w(n.l)," A:").concat(w(r))),{title:l,subtitle:o,media:()=>a.jsx("div",{style:{backgroundColor:null!=t?t:"#000",opacity:null!=r?r:1,position:"absolute",height:"100%",width:"100%",top:"0",left:"0"}})}}}}),S=n.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"}]}),k=n.definePlugin({name:"@sanity/color-input",schema:{types:[b,S,g,B]}});exports.ColorInput=C,exports.color=B,exports.colorInput=k,exports.hslaColor=b,exports.hsvaColor=S,exports.rgbaColor=g;
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\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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"}
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: ObjectInputProps) {\n const {onChange, readOnly} = props\n const value = props.value as ColorValue | undefined\n const type = props.schemaType as ColorSchemaType\n const focusRef = useRef<HTMLButtonElement>(null)\n\n // use local state so we can have instant ui updates while debouncing patch emits\n const [color, setColor] = useState(value)\n useEffect(() => setColor(value), [value])\n\n const emitSetColor = useCallback(\n (nextColor: ColorValue) => {\n const fieldPatches = type.fields\n .filter((field) => field.name in nextColor)\n .map((field) => {\n const nextFieldValue = nextColor[field.name as keyof ColorValue]\n const isObject = field.type.jsonType === 'object'\n return set(\n isObject ? Object.assign({_type: field.type.name}, nextFieldValue) : nextFieldValue,\n [field.name]\n )\n })\n\n onChange([\n setIfMissing({_type: type.name}),\n set(type.name, ['_type']),\n set(nextColor.rgb?.a, ['alpha']),\n ...fieldPatches,\n ])\n },\n [onChange, type]\n )\n\n // The color picker emits onChange events continuously while the user is sliding the\n // hue/saturation/alpha selectors. This debounces the event to avoid excessive patches\n const debouncedColorChange = useMemo(() => debounce(emitSetColor, 100), [emitSetColor])\n const handleColorChange = useCallback(\n (nextColor: ColorValue) => {\n setColor(nextColor)\n debouncedColorChange(nextColor)\n },\n [debouncedColorChange, setColor]\n )\n\n const handleCreateColor = useCallback(() => {\n setColor(DEFAULT_COLOR)\n emitSetColor(DEFAULT_COLOR)\n }, [emitSetColor])\n\n const handleUnset = useCallback(() => {\n setColor(undefined)\n onChange(unset())\n }, [onChange])\n\n return (\n <>\n {value && value.hex ? (\n <ColorPicker\n /* ref={this.focusRef}*/\n color={color}\n onChange={handleColorChange}\n readOnly={readOnly || (typeof type.readOnly === 'boolean' && type.readOnly)}\n disableAlpha={!!type.options?.disableAlpha}\n onUnset={handleUnset}\n />\n ) : (\n <Button\n icon={AddIcon}\n mode=\"ghost\"\n text=\"Create color\"\n ref={focusRef}\n disabled={Boolean(readOnly)}\n onClick={handleCreateColor}\n />\n )}\n </>\n )\n}\n","import React from 'react'\nimport {ColorInput, ColorOptions} from '../ColorInput'\nimport {defineType, ObjectDefinition} from 'sanity'\n\nconst round = (val: number = 1) => Math.round(val * 100)\n\nconst colorTypeName = 'color' as const\n\n/**\n * @public\n */\nexport interface ColorDefinition extends Omit<ObjectDefinition, 'type' | 'fields' | 'options'> {\n type: typeof colorTypeName\n options?: ColorOptions\n}\n\ndeclare module '@sanity/types' {\n // makes type: 'color' narrow correctly when using defineTyp/defineField/defineArrayMember\n export interface IntrinsicDefinitions {\n color: ColorDefinition\n }\n}\n\nexport const color = defineType({\n name: colorTypeName,\n type: 'object',\n title: 'Color',\n components: {input: ColorInput},\n fields: [\n {\n title: 'Hex',\n name: 'hex',\n type: 'string',\n },\n {\n title: 'Alpha',\n name: 'alpha',\n type: 'number',\n },\n {\n title: 'Hue Saturation Lightness',\n name: 'hsl',\n type: 'hslaColor',\n },\n {\n title: 'Hue Saturation Value',\n name: 'hsv',\n type: 'hsvaColor',\n },\n {\n title: 'Red Green Blue (rgb)',\n name: 'rgb',\n type: 'rgbaColor',\n },\n ],\n preview: {\n select: {\n title: 'hex',\n alpha: 'alpha',\n hex: 'hex',\n hsl: 'hsl',\n },\n prepare({\n title,\n hex,\n hsl,\n alpha,\n }: {\n title?: string\n alpha?: number\n hex?: string\n hsl?: {h: number; s: number; l: number}\n }) {\n let subtitle = hex || 'No color set'\n if (hsl) {\n subtitle = `H:${round(hsl.h)} S:${round(hsl.s)} L:${round(hsl.l)} A:${round(alpha)}`\n }\n return {\n title: title,\n subtitle: subtitle,\n media: () => (\n <div\n style={{\n backgroundColor: hex ?? '#000',\n opacity: alpha ?? 1,\n position: 'absolute',\n height: '100%',\n width: '100%',\n top: '0',\n left: '0',\n }}\n />\n ),\n }\n },\n },\n})\n","import {defineType} from 'sanity'\n\nexport const hsvaColor = defineType({\n title: 'Hue Saturation Value',\n name: 'hsvaColor',\n type: 'object',\n fields: [\n {name: 'h', type: 'number', title: 'Hue'},\n {name: 's', type: 'number', title: 'Saturation'},\n {name: 'v', type: 'number', title: 'Value'},\n {name: 'a', type: 'number', title: 'Alpha'},\n ],\n})\n","import {definePlugin} from 'sanity'\nimport {hslaColor} from './schemas/hslaColor'\nimport {rgbaColor} from './schemas/rgbaColor'\nimport {color, ColorDefinition} from './schemas/color'\nimport {hsvaColor} from './schemas/hsvaColor'\n\nexport const colorInput = definePlugin({\n name: '@sanity/color-input',\n schema: {\n types: [hslaColor, hsvaColor, rgbaColor, color],\n },\n})\n\nexport {hslaColor, rgbaColor, color, hsvaColor}\nexport {ColorInput} from './ColorInput'\nexport type {ColorDefinition}\nexport type {ColorValue, ColorInputProps, ColorOptions, ColorSchemaType} from './ColorInput'\n"],"names":["hslaColor","defineType","title","name","type","fields","rgbaColor","ColorPickerFields","_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","components","preview","select","prepare","_ref2","subtitle","media","opacity","top","left","hsvaColor","colorInput","definePlugin","schema","types"],"mappings":"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"}
package/lib/src/index.d.ts CHANGED
@@ -36,7 +36,7 @@ export declare interface ColorDefinition
36
36
  options?: ColorOptions
37
37
  }
38
38
 
39
- export declare function ColorInput(props: ColorInputProps): JSX.Element
39
+ export declare function ColorInput(props: ObjectInputProps): JSX.Element
40
40
 
41
41
  export declare const colorInput: Plugin_2<void>
42
42
 
@@ -83,7 +83,7 @@ export declare const rgbaColor: {
83
83
  export {}
84
84
 
85
85
  declare module '@sanity/types' {
86
- interface IntrinsicDefinitions {
87
- color: ColorDefinition;
88
- }
89
- }
86
+ interface IntrinsicDefinitions {
87
+ color: ColorDefinition
88
+ }
89
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sanity/color-input",
3
- "version": "3.0.0",
3
+ "version": "3.0.1",
4
4
  "description": "Color input",
5
5
  "keywords": [
6
6
  "sanity",
@@ -63,8 +63,8 @@
63
63
  "devDependencies": {
64
64
  "@commitlint/cli": "^17.2.0",
65
65
  "@commitlint/config-conventional": "^17.2.0",
66
- "@sanity/pkg-utils": "^1.17.2",
67
- "@sanity/plugin-kit": "^2.1.2",
66
+ "@sanity/pkg-utils": "^1.17.3",
67
+ "@sanity/plugin-kit": "^2.1.17",
68
68
  "@sanity/semantic-release-preset": "^2.0.2",
69
69
  "@types/react-color": "^2.17.6",
70
70
  "@types/styled-components": "^5.1.25",
package/src/ColorInput.tsx CHANGED
@@ -32,8 +32,10 @@ export type ColorSchemaType = Omit<ObjectSchemaType, 'options'> & {
32
32
  }
33
33
  export type ColorInputProps = ObjectInputProps<ColorValue, ColorSchemaType>
34
34
 
35
- export function ColorInput(props: ColorInputProps) {
36
- const {onChange, schemaType: type, readOnly, value} = props
35
+ export function ColorInput(props: ObjectInputProps) {
36
+ const {onChange, readOnly} = props
37
+ const value = props.value as ColorValue | undefined
38
+ const type = props.schemaType as ColorSchemaType
37
39
  const focusRef = useRef<HTMLButtonElement>(null)
38
40
 
39
41
  // use local state so we can have instant ui updates while debouncing patch emits
@@ -86,7 +88,7 @@ export function ColorInput(props: ColorInputProps) {
86
88
 
87
89
  return (
88
90
  <>
89
- {value ? (
91
+ {value && value.hex ? (
90
92
  <ColorPicker
91
93
  /* ref={this.focusRef}*/
92
94
  color={color}
package/src/schemas/color.tsx CHANGED
@@ -25,7 +25,7 @@ export const color = defineType({
25
25
  name: colorTypeName,
26
26
  type: 'object',
27
27
  title: 'Color',
28
- ...({components: {input: ColorInput}} as {}), //TODO revert this change when sanity 3.0.0-rc.1 is released
28
+ components: {input: ColorInput},
29
29
  fields: [
30
30
  {
31
31
  title: 'Hex',