@react-stately/color - npm Package Compare versions

Comparing version 3.0.0-alpha.0 to 3.0.0-beta.0

dist/main.js

 var {
+  useRef,
   useState,
@@ -39,18 +40,18 @@ useMemo,
 var $bfb76047ec406c0239c2b8064c9b3ca$exports = {};
-$bfb76047ec406c0239c2b8064c9b3ca$exports = JSON.parse("{\"hue\":\"تدرج اللون\",\"saturation\":\"‏‏الإشباع\",\"lightness\":\"الإضاءة\",\"brightness\":\"والقيمة\",\"red\":\"أحمر\",\"green\":\"أخضر\",\"blue\":\"أزرق\",\"alpha\":\"أولي\"}");
+$bfb76047ec406c0239c2b8064c9b3ca$exports = JSON.parse("{\"alpha\":\"ألفا\",\"blue\":\"أزرق\",\"brightness\":\"السطوع\",\"green\":\"أخضر\",\"hue\":\"درجة اللون\",\"lightness\":\"الإضاءة\",\"red\":\"أحمر\",\"saturation\":\"التشبع\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/bg-BG.json
 var $daebde84800f5aeee9aa172172d5b6f$exports = {};
-$daebde84800f5aeee9aa172172d5b6f$exports = JSON.parse("{\"hue\":\"Нюанс\",\"saturation\":\"Наситеност\",\"lightness\":\"Осветеност\",\"brightness\":\"Яркост\",\"red\":\"Червено\",\"green\":\"Зелено\",\"blue\":\"Синьо\",\"alpha\":\"Алфа\"}");
+$daebde84800f5aeee9aa172172d5b6f$exports = JSON.parse("{\"alpha\":\"Алфа\",\"blue\":\"Синьо\",\"brightness\":\"Яркост\",\"green\":\"Зелено\",\"hue\":\"Оттенък\",\"lightness\":\"Лекота\",\"red\":\"Червено\",\"saturation\":\"Наситеност\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/cs-CZ.json
 var $a4cfde59be1b5dcb6fbb06fb09589d$exports = {};
-$a4cfde59be1b5dcb6fbb06fb09589d$exports = JSON.parse("{\"hue\":\"Odstín\",\"saturation\":\"Sytost\",\"lightness\":\"Světlost\",\"brightness\":\"Jas\",\"red\":\"Červená\",\"green\":\"Zelená\",\"blue\":\"Modrá\",\"alpha\":\"Alfa\"}");
+$a4cfde59be1b5dcb6fbb06fb09589d$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Modrá\",\"brightness\":\"Jas\",\"green\":\"Zelená\",\"hue\":\"Odstín\",\"lightness\":\"Světlost\",\"red\":\"Červená\",\"saturation\":\"Sytost\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/da-DK.json
 var $db43cffdd303de8bb2de21feafa35b91$exports = {};
-$db43cffdd303de8bb2de21feafa35b91$exports = JSON.parse("{\"hue\":\"Nuance\",\"saturation\":\"Mætning\",\"lightness\":\"Lysstyrke\",\"brightness\":\"Værdi\",\"red\":\"Rød\",\"green\":\"Grøn\",\"blue\":\"Blå\",\"alpha\":\"Alfa\"}");
+$db43cffdd303de8bb2de21feafa35b91$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blå\",\"brightness\":\"Lysstyrke\",\"green\":\"Grøn\",\"hue\":\"Tone\",\"lightness\":\"Lyshed\",\"red\":\"Rød\",\"saturation\":\"Farvemætning\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/de-DE.json
 var $be2be3d81ee825501b843aad02cb$exports = {};
-$be2be3d81ee825501b843aad02cb$exports = JSON.parse("{\"hue\":\"Farbton\",\"saturation\":\"Sättigung\",\"lightness\":\"Leuchtkraft\",\"brightness\":\"Helligkeit\",\"red\":\"Rot\",\"green\":\"Grün\",\"blue\":\"Blau\",\"alpha\":\"Alpha\"}");
+$be2be3d81ee825501b843aad02cb$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Blau\",\"brightness\":\"Helligkeit\",\"green\":\"Grün\",\"hue\":\"Farbton\",\"lightness\":\"Leuchtkraft\",\"red\":\"Rot\",\"saturation\":\"Sättigung\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/el-GR.json
 var $c2fbd942c20b23aa5adc2f3f98bd779$exports = {};
-$c2fbd942c20b23aa5adc2f3f98bd779$exports = JSON.parse("{\"hue\":\"Απόχρωση\",\"saturation\":\"Κορεσμού\",\"lightness\":\"Φωτεινότητα\",\"brightness\":\"Τιμή\",\"red\":\"Κόκκινο\",\"green\":\"Πράσινο\",\"blue\":\"Μπλε\",\"alpha\":\"Αλφα\"}");
+$c2fbd942c20b23aa5adc2f3f98bd779$exports = JSON.parse("{\"alpha\":\"Άλφα\",\"blue\":\"Μπλε\",\"brightness\":\"Φωτεινότητα\",\"green\":\"Πράσινο\",\"hue\":\"Τόνος\",\"lightness\":\"Φωτεινότητα\",\"red\":\"Κόκκινο\",\"saturation\":\"Κορεσμός\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/en-US.json
@@ -61,78 +62,81 @@ var $abdeb3eeac24b96ea1b32ebcdc8bf175$exports = {};
 var $b59ba9c40583ad49816c29f93cd734c9$exports = {};
-$b59ba9c40583ad49816c29f93cd734c9$exports = JSON.parse("{\"hue\":\"Matiz\",\"saturation\":\"Saturación\",\"lightness\":\"Claridad\",\"brightness\":\"Brillo\",\"red\":\"Rojo\",\"green\":\"Verde\",\"blue\":\"Azul\",\"alpha\":\"Alfa\"}");
+$b59ba9c40583ad49816c29f93cd734c9$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Azul\",\"brightness\":\"Brillo\",\"green\":\"Verde\",\"hue\":\"Tono\",\"lightness\":\"Luminosidad\",\"red\":\"Rojo\",\"saturation\":\"Saturación\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/et-EE.json
 var $c3d8ff3bd33905ba4a85bc554a90f3c6$exports = {};
-$c3d8ff3bd33905ba4a85bc554a90f3c6$exports = JSON.parse("{\"hue\":\"Toon\",\"saturation\":\"Küllastus\",\"lightness\":\"Helendus\",\"brightness\":\"Väärtus\",\"red\":\"Punane\",\"green\":\"Roheline\",\"blue\":\"Sinine\",\"alpha\":\"Alfa\"}");
+$c3d8ff3bd33905ba4a85bc554a90f3c6$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Sinine\",\"brightness\":\"Heledus\",\"green\":\"Roheline\",\"hue\":\"Värv\",\"lightness\":\"Valgus\",\"red\":\"Punane\",\"saturation\":\"Küllastus\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/fi-FI.json
 var $ccab754253a026877ee47cbc1cb03ca4$exports = {};
-$ccab754253a026877ee47cbc1cb03ca4$exports = JSON.parse("{\"hue\":\"Värisävy\",\"saturation\":\"Kylläisyys\",\"lightness\":\"Valoisuus\",\"brightness\":\"Kirkkaus\",\"red\":\"Punainen\",\"green\":\"Vihreä\",\"blue\":\"Sininen\",\"alpha\":\"Alpha\"}");
+$ccab754253a026877ee47cbc1cb03ca4$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Sininen\",\"brightness\":\"Kirkkaus\",\"green\":\"Vihreä\",\"hue\":\"Sävy\",\"lightness\":\"Valomäärä\",\"red\":\"Punainen\",\"saturation\":\"Värikylläisyys\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/fr-FR.json
 var $ad0191b1c7bbd0c718e613a5db93445d$exports = {};
-$ad0191b1c7bbd0c718e613a5db93445d$exports = JSON.parse("{\"hue\":\"Teinte\",\"saturation\":\"Saturation\",\"lightness\":\"Clarté\",\"brightness\":\"Luminosité\",\"red\":\"Rouge\",\"green\":\"Vert\",\"blue\":\"Bleu\",\"alpha\":\"Alpha\"}");
+$ad0191b1c7bbd0c718e613a5db93445d$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Bleu\",\"brightness\":\"Luminosité\",\"green\":\"Vert\",\"hue\":\"Teinte\",\"lightness\":\"Luminosité\",\"red\":\"Rouge\",\"saturation\":\"Saturation\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/he-IL.json
 var $b4ea486bd9841aabeecd5373b70dace5$exports = {};
-$b4ea486bd9841aabeecd5373b70dace5$exports = JSON.parse("{\"hue\":\"גוון\",\"saturation\":\"רוויה\",\"lightness\":\"‏‏בהירות\",\"brightness\":\"וערך\",\"red\":\"אדום\",\"green\":\"ירוק\",\"blue\":\"כחול\",\"alpha\":\"אלפא\"}");
+$b4ea486bd9841aabeecd5373b70dace5$exports = JSON.parse("{\"alpha\":\"אלפא\",\"blue\":\"כחול\",\"brightness\":\"בהירות\",\"green\":\"ירוק\",\"hue\":\"גוון\",\"lightness\":\"כמות אור\",\"red\":\"אדום\",\"saturation\":\"רוויה\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/hr-HR.json
 var $b99897eafdd92c74120ae6b4e0248b94$exports = {};
-$b99897eafdd92c74120ae6b4e0248b94$exports = JSON.parse("{\"hue\":\"Nijansa\",\"saturation\":\"Zasićenje\",\"lightness\":\"Svjetlina\",\"brightness\":\"Vrijednost\",\"red\":\"Crvena\",\"green\":\"Zelena\",\"blue\":\"Plava\",\"alpha\":\"Alfa\"}");
+$b99897eafdd92c74120ae6b4e0248b94$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Plava\",\"brightness\":\"Svjetlina\",\"green\":\"Zelena\",\"hue\":\"Nijansa\",\"lightness\":\"Osvijetljenost\",\"red\":\"Crvena\",\"saturation\":\"Zasićenost\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/hu-HU.json
 var $a2609a148daf4c3ca1d5b0ce5ec6aa$exports = {};
-$a2609a148daf4c3ca1d5b0ce5ec6aa$exports = JSON.parse("{\"hue\":\"Árnyalat\",\"saturation\":\"Telítettség\",\"lightness\":\"Fényerő\",\"brightness\":\"Értéke\",\"red\":\"Vörös\",\"green\":\"Zöld\",\"blue\":\"Kék\",\"alpha\":\"Alfa\"}");
+$a2609a148daf4c3ca1d5b0ce5ec6aa$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Kék\",\"brightness\":\"Fényesség\",\"green\":\"Zöld\",\"hue\":\"Színárnyalat\",\"lightness\":\"Világosság\",\"red\":\"Piros\",\"saturation\":\"Telítettség\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/it-IT.json
 var $da5b478c1fd01a35d72944d9cb71a34e$exports = {};
-$da5b478c1fd01a35d72944d9cb71a34e$exports = JSON.parse("{\"hue\":\"Tonalità\",\"saturation\":\"Saturazione\",\"lightness\":\"Luminosità\",\"brightness\":\"Lucentezza\",\"red\":\"Rosso\",\"green\":\"Verde\",\"blue\":\"Blu\",\"alpha\":\"Alfa\"}");
+$da5b478c1fd01a35d72944d9cb71a34e$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blu\",\"brightness\":\"Luminosità\",\"green\":\"Verde\",\"hue\":\"Tonalità\",\"lightness\":\"Luminosità\",\"red\":\"Rosso\",\"saturation\":\"Saturazione\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/ja-JP.json
 var $dc461c55c88305a012147cc9fb7$exports = {};
-$dc461c55c88305a012147cc9fb7$exports = JSON.parse("{\"hue\":\"色合い\",\"saturation\":\"鮮やかさ\",\"lightness\":\"輝度\",\"brightness\":\"明るさ\",\"red\":\"赤\",\"green\":\"緑\",\"blue\":\"青\",\"alpha\":\"アルファ\"}");
+$dc461c55c88305a012147cc9fb7$exports = JSON.parse("{\"alpha\":\"アルファ\",\"blue\":\"青\",\"brightness\":\"明るさ\",\"green\":\"緑\",\"hue\":\"色相\",\"lightness\":\"明度\",\"red\":\"赤\",\"saturation\":\"彩度\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/ko-KR.json
 var $b4684c3a5d9d860ab05adffe33fceab3$exports = {};
-$b4684c3a5d9d860ab05adffe33fceab3$exports = JSON.parse("{\"hue\":\"색상\",\"saturation\":\"채도\",\"lightness\":\"명도\",\"brightness\":\"값\",\"red\":\"빨강\",\"green\":\"녹색\",\"blue\":\"파랑\",\"alpha\":\"알파\"}");
+$b4684c3a5d9d860ab05adffe33fceab3$exports = JSON.parse("{\"alpha\":\"알파\",\"blue\":\"파랑\",\"brightness\":\"명도\",\"green\":\"초록\",\"hue\":\"색조\",\"lightness\":\"밝기\",\"red\":\"빨강\",\"saturation\":\"채도\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/lt-LT.json
 var $be917ddab49d0b151b9f62b823bba50$exports = {};
-$be917ddab49d0b151b9f62b823bba50$exports = JSON.parse("{\"hue\":\"Atspalvis\",\"saturation\":\"Grynis\",\"lightness\":\"Skaistis\",\"brightness\":\"Ryškumas\",\"red\":\"Raudona\",\"green\":\"Žalia\",\"blue\":\"Mėlyna\",\"alpha\":\"Alfa\"}");
+$be917ddab49d0b151b9f62b823bba50$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Mėlyna\",\"brightness\":\"Ryškumas\",\"green\":\"Žalia\",\"hue\":\"Atspalvis\",\"lightness\":\"Šviesumas\",\"red\":\"Raudona\",\"saturation\":\"Įsotinimas\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/lv-LV.json
 var $f17c13ae26a2d4d99928424c79$exports = {};
-$f17c13ae26a2d4d99928424c79$exports = JSON.parse("{\"hue\":\"Nokrāsa\",\"saturation\":\"Piesātinājums\",\"lightness\":\"Vieglums\",\"brightness\":\"Spilgtums\",\"red\":\"Sarkana\",\"green\":\"Zaļa\",\"blue\":\"Zila\",\"alpha\":\"Alfa\"}");
+$f17c13ae26a2d4d99928424c79$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Zila\",\"brightness\":\"Spilgtums\",\"green\":\"Zaļa\",\"hue\":\"Nokrāsa\",\"lightness\":\"Gaišums\",\"red\":\"Sarkana\",\"saturation\":\"Piesātinājums\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/nb-NO.json
 var $e4b8847de3ab9d1344d713259cef878$exports = {};
-$e4b8847de3ab9d1344d713259cef878$exports = JSON.parse("{\"hue\":\"Fargetone\",\"saturation\":\"Metning\",\"lightness\":\"Lyshet\",\"brightness\":\"Lysstyrke\",\"red\":\"Rød\",\"green\":\"Grønn\",\"blue\":\"Blå\",\"alpha\":\"Alfa\"}");
+$e4b8847de3ab9d1344d713259cef878$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blå\",\"brightness\":\"Lysstyrke\",\"green\":\"Grønn\",\"hue\":\"Fargetone\",\"lightness\":\"Lyshet\",\"red\":\"Rød\",\"saturation\":\"Metning\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/nl-NL.json
 var $f077195d9918fb9d3561710aae4a62cc$exports = {};
-$f077195d9918fb9d3561710aae4a62cc$exports = JSON.parse("{\"hue\":\"Tint\",\"saturation\":\"Verzadiging\",\"lightness\":\"Lichtheid\",\"brightness\":\"Helderheid\",\"red\":\"Rood\",\"green\":\"Groen\",\"blue\":\"Blauw\",\"alpha\":\"Alfa\"}");
+$f077195d9918fb9d3561710aae4a62cc$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blauw\",\"brightness\":\"Helderheid\",\"green\":\"Groen\",\"hue\":\"Kleurtoon\",\"lightness\":\"Lichtsterkte\",\"red\":\"Rood\",\"saturation\":\"Verzadiging\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/pl-PL.json
 var $d24a27ab79addeeea85ff5eb95318b06$exports = {};
-$d24a27ab79addeeea85ff5eb95318b06$exports = JSON.parse("{\"hue\":\"Odcień\",\"saturation\":\"Nasycenie\",\"lightness\":\"Jasność\",\"brightness\":\"Jasność\",\"red\":\"Czerwony\",\"green\":\"Zielony\",\"blue\":\"Niebieski\",\"alpha\":\"Alfa\"}");
+$d24a27ab79addeeea85ff5eb95318b06$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Niebieski\",\"brightness\":\"Jasność\",\"green\":\"Zielony\",\"hue\":\"Odcień\",\"lightness\":\"Jaskrawość\",\"red\":\"Czerwony\",\"saturation\":\"Nasycenie\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/pt-BR.json
 var $ceb70a725fde80d49dd1138e8ca9e306$exports = {};
-$ceb70a725fde80d49dd1138e8ca9e306$exports = JSON.parse("{\"hue\":\"Matiz\",\"saturation\":\"Saturação\",\"lightness\":\"Luminosidade\",\"brightness\":\"Brilho\",\"red\":\"Vermelho\",\"green\":\"Verde\",\"blue\":\"Azul\",\"alpha\":\"Alfa\"}");
+$ceb70a725fde80d49dd1138e8ca9e306$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Azul\",\"brightness\":\"Brilho\",\"green\":\"Verde\",\"hue\":\"Matiz\",\"lightness\":\"Luminosidade\",\"red\":\"Vermelho\",\"saturation\":\"Saturação\"}");
+// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/pt-PT.json
+var $c6257abacc4cefb22bbd8081edc05$exports = {};
+$c6257abacc4cefb22bbd8081edc05$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Azul\",\"brightness\":\"Luminosidade\",\"green\":\"Verde\",\"hue\":\"Tonalidade\",\"lightness\":\"Claridade\",\"red\":\"Vermelho\",\"saturation\":\"Saturação\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/ro-RO.json
 var $f25ae63965bcad80a86787e16972$exports = {};
-$f25ae63965bcad80a86787e16972$exports = JSON.parse("{\"hue\":\"Nuanță\",\"saturation\":\"Saturație\",\"lightness\":\"Luminozitate\",\"brightness\":\"Valoare\",\"red\":\"Roșu\",\"green\":\"Verde\",\"blue\":\"Albastru\",\"alpha\":\"Alfa\"}");
+$f25ae63965bcad80a86787e16972$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Albastru\",\"brightness\":\"Luminozitate\",\"green\":\"Verde\",\"hue\":\"Nuanță\",\"lightness\":\"Luminozitate\",\"red\":\"Roșu\",\"saturation\":\"Saturație\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/ru-RU.json
 var $d131f7f35da9efbf3e5c4c90d88523$exports = {};
-$d131f7f35da9efbf3e5c4c90d88523$exports = JSON.parse("{\"hue\":\"Оттенок\",\"saturation\":\"Насыщенность\",\"lightness\":\"Освещенность\",\"brightness\":\"Яркость\",\"red\":\"Красный\",\"green\":\"Зеленый\",\"blue\":\"Синий\",\"alpha\":\"Альфа\"}");
+$d131f7f35da9efbf3e5c4c90d88523$exports = JSON.parse("{\"alpha\":\"Альфа\",\"blue\":\"Синий\",\"brightness\":\"Яркость\",\"green\":\"Зеленый\",\"hue\":\"Оттенок\",\"lightness\":\"Освещенность\",\"red\":\"Красный\",\"saturation\":\"Насыщенность\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/sk-SK.json
 var $bc31c73edcf6a69405580806e86a1580$exports = {};
-$bc31c73edcf6a69405580806e86a1580$exports = JSON.parse("{\"hue\":\"Odtieň\",\"saturation\":\"Sýtosť\",\"lightness\":\"Svetlosť\",\"brightness\":\"Jas\",\"red\":\"Červená\",\"green\":\"Zelená\",\"blue\":\"Modrá\",\"alpha\":\"Alfa\"}");
+$bc31c73edcf6a69405580806e86a1580$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Modrá\",\"brightness\":\"Jas\",\"green\":\"Zelená\",\"hue\":\"Odtieň\",\"lightness\":\"Svetlosť\",\"red\":\"Červená\",\"saturation\":\"Sýtosť\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/sl-SI.json
 var $df72c407396964a6c780d567792cdd2$exports = {};
-$df72c407396964a6c780d567792cdd2$exports = JSON.parse("{\"hue\":\"Odtenek\",\"saturation\":\"Nasičenost\",\"lightness\":\"Svetilnost\",\"brightness\":\"Svetlost\",\"red\":\"Rdeča\",\"green\":\"Zelena\",\"blue\":\"Modra\",\"alpha\":\"Alfa\"}");
+$df72c407396964a6c780d567792cdd2$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Modra\",\"brightness\":\"Svetlost\",\"green\":\"Zelena\",\"hue\":\"Barva\",\"lightness\":\"Lahkost\",\"red\":\"Rdeča\",\"saturation\":\"Nasičenost\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/sr-SP.json
 var $cad65e4825dd66e0bd6c1ff51bb48a91$exports = {};
-$cad65e4825dd66e0bd6c1ff51bb48a91$exports = JSON.parse("{\"hue\":\"Нијанса\",\"saturation\":\"Засићење\",\"lightness\":\"Осветљење\",\"brightness\":\"Светлина\",\"red\":\"Црвена\",\"green\":\"Зелена\",\"blue\":\"Плава\",\"alpha\":\"Алфа\"}");
+$cad65e4825dd66e0bd6c1ff51bb48a91$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Plava\",\"brightness\":\"Osvetljenost\",\"green\":\"Zelena\",\"hue\":\"Nijansa\",\"lightness\":\"Osvetljenje\",\"red\":\"Crvena\",\"saturation\":\"Zasićenje\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/sv-SE.json
 var $d7c0d1f1dc8ea1aa86708102c79a$exports = {};
-$d7c0d1f1dc8ea1aa86708102c79a$exports = JSON.parse("{\"hue\":\"Nyans\",\"saturation\":\"Mättnad\",\"lightness\":\"Lätthet\",\"brightness\":\"Ljusstyrka\",\"red\":\"Röd\",\"green\":\"Grön\",\"blue\":\"Blå\",\"alpha\":\"Alfa\"}");
+$d7c0d1f1dc8ea1aa86708102c79a$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blått\",\"brightness\":\"Ljusstyrka\",\"green\":\"Grönt\",\"hue\":\"Nyans\",\"lightness\":\"Ljushet\",\"red\":\"Rött\",\"saturation\":\"Mättnad\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/tr-TR.json
 var $a0d6a531d06c52db2f4cd7c96356300e$exports = {};
-$a0d6a531d06c52db2f4cd7c96356300e$exports = JSON.parse("{\"hue\":\"Ton\",\"saturation\":\"Doygunluk\",\"lightness\":\"Hafiflik\",\"brightness\":\"Parlaklık\",\"red\":\"Kırmızı\",\"green\":\"Yeşil\",\"blue\":\"Mavi\",\"alpha\":\"Alfa\"}");
+$a0d6a531d06c52db2f4cd7c96356300e$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Mavi\",\"brightness\":\"Parlaklık\",\"green\":\"Yeşil\",\"hue\":\"Ton\",\"lightness\":\"Canlılık\",\"red\":\"Kırmızı\",\"saturation\":\"Doygunluk\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/uk-UA.json
 var $a70877667b8705b2c85173d23d$exports = {};
-$a70877667b8705b2c85173d23d$exports = JSON.parse("{\"hue\":\"Відтінок\",\"saturation\":\"Насиченість\",\"lightness\":\"Яскравість\",\"brightness\":\"Інтенсивність\",\"red\":\"Червоний\",\"green\":\"Зелений\",\"blue\":\"Синій\",\"alpha\":\"Альфа\"}");
+$a70877667b8705b2c85173d23d$exports = JSON.parse("{\"alpha\":\"Альфа\",\"blue\":\"Синій\",\"brightness\":\"Яскравість\",\"green\":\"Зелений\",\"hue\":\"Тон\",\"lightness\":\"Освітленість\",\"red\":\"Червоний\",\"saturation\":\"Насиченість\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/zh-CN.json
 var $c38ee15e302a37d9225987d335ad869e$exports = {};
-$c38ee15e302a37d9225987d335ad869e$exports = JSON.parse("{\"hue\":\"色调\",\"saturation\":\"饱和度\",\"lightness\":\"光度\",\"brightness\":\"Brightness\",\"red\":\"红\",\"green\":\"绿\",\"blue\":\"蓝\",\"alpha\":\"Alpha\"}");
+$c38ee15e302a37d9225987d335ad869e$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"蓝色\",\"brightness\":\"亮度\",\"green\":\"绿色\",\"hue\":\"色相\",\"lightness\":\"明亮度\",\"red\":\"红色\",\"saturation\":\"饱和度\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/zh-TW.json
 var $d2a1fa8d41cf433c2df57cdf8eba52a3$exports = {};
-$d2a1fa8d41cf433c2df57cdf8eba52a3$exports = JSON.parse("{\"hue\":\"色調\",\"saturation\":\"飽和\",\"lightness\":\"光度\",\"brightness\":\"亮度\",\"red\":\"紅\",\"green\":\"綠\",\"blue\":\"藍\",\"alpha\":\"Alpha\"}");
+$d2a1fa8d41cf433c2df57cdf8eba52a3$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"藍色\",\"brightness\":\"亮度\",\"green\":\"綠色\",\"hue\":\"色相\",\"lightness\":\"明亮\",\"red\":\"紅色\",\"saturation\":\"飽和度\"}");
 // @ts-ignore
@@ -163,2 +167,3 @@ const $b54655da051f787a04029ec3711$var$intlMessages = {
   "pt-BR": _babelRuntimeHelpersInteropRequireDefault($ceb70a725fde80d49dd1138e8ca9e306$exports).default,
+  "pt-PT": _babelRuntimeHelpersInteropRequireDefault($c6257abacc4cefb22bbd8081edc05$exports).default,
   "ro-RO": _babelRuntimeHelpersInteropRequireDefault($f25ae63965bcad80a86787e16972$exports).default,
@@ -176,2 +181,3 @@ "ru-RU": _babelRuntimeHelpersInteropRequireDefault($d131f7f35da9efbf3e5c4c90d88523$exports).default,
 const $b54655da051f787a04029ec3711$var$messages = new MessageDictionary($b54655da051f787a04029ec3711$var$intlMessages);
+/** Parses a color from a string value. Throws an error if the string could not be parsed. */
 
@@ -767,2 +773,3 @@ function parseColor(value) {
     onChange,
+    onChangeEnd,
     step = 1
@@ -776,2 +783,4 @@ } = props;
   let [value, setValue] = useControlledState($dba59c0b8a82682c07fa6f5c72e73481$var$normalizeColor(props.value), $dba59c0b8a82682c07fa6f5c72e73481$var$normalizeColor(defaultValue), onChange);
+  let valueRef = useRef(value);
+  valueRef.current = value;
   let [isDragging, setDragging] = useState(false);
@@ -797,3 +806,5 @@ let hue = value.getChannelValue('hue');
     setValue(v) {
-      setValue($dba59c0b8a82682c07fa6f5c72e73481$var$normalizeColor(v));
+      let color = $dba59c0b8a82682c07fa6f5c72e73481$var$normalizeColor(v);
+      valueRef.current = color;
+      setValue(color);
     },
@@ -843,7 +854,18 @@
 
-    setDragging(value) {
-      setDragging(value);
+    setDragging(isDragging) {
+      setDragging(wasDragging => {
+        if (onChangeEnd && !isDragging && wasDragging) {
+          onChangeEnd(valueRef.current);
+        }
+
+        return isDragging;
+      });
     },
 
-    isDragging
+    isDragging,
+
+    getDisplayColor() {
+      return value.withChannelValue('saturation', 100).withChannelValue('lightness', 50);
+    }
+
   };
@@ -850,0 +872,0 @@ }

dist/module.js

@@ -1,2 +0,2 @@
-import { useState, useMemo, useEffect } from "react";
+import { useRef, useState, useMemo, useEffect } from "react";
 import { useControlledState } from "@react-stately/utils";
@@ -12,18 +12,18 @@ import { useSliderState } from "@react-stately/slider";
 var $b2cd9264f0b716f5f6077988ebeb8d5$exports = {};
-$b2cd9264f0b716f5f6077988ebeb8d5$exports = JSON.parse("{\"hue\":\"تدرج اللون\",\"saturation\":\"‏‏الإشباع\",\"lightness\":\"الإضاءة\",\"brightness\":\"والقيمة\",\"red\":\"أحمر\",\"green\":\"أخضر\",\"blue\":\"أزرق\",\"alpha\":\"أولي\"}");
+$b2cd9264f0b716f5f6077988ebeb8d5$exports = JSON.parse("{\"alpha\":\"ألفا\",\"blue\":\"أزرق\",\"brightness\":\"السطوع\",\"green\":\"أخضر\",\"hue\":\"درجة اللون\",\"lightness\":\"الإضاءة\",\"red\":\"أحمر\",\"saturation\":\"التشبع\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/bg-BG.json
 var $cdad99d1d4c78a097fa29797f20e3ec$exports = {};
-$cdad99d1d4c78a097fa29797f20e3ec$exports = JSON.parse("{\"hue\":\"Нюанс\",\"saturation\":\"Наситеност\",\"lightness\":\"Осветеност\",\"brightness\":\"Яркост\",\"red\":\"Червено\",\"green\":\"Зелено\",\"blue\":\"Синьо\",\"alpha\":\"Алфа\"}");
+$cdad99d1d4c78a097fa29797f20e3ec$exports = JSON.parse("{\"alpha\":\"Алфа\",\"blue\":\"Синьо\",\"brightness\":\"Яркост\",\"green\":\"Зелено\",\"hue\":\"Оттенък\",\"lightness\":\"Лекота\",\"red\":\"Червено\",\"saturation\":\"Наситеност\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/cs-CZ.json
 var $f9cd6479f5235258a90316a784221e3b$exports = {};
-$f9cd6479f5235258a90316a784221e3b$exports = JSON.parse("{\"hue\":\"Odstín\",\"saturation\":\"Sytost\",\"lightness\":\"Světlost\",\"brightness\":\"Jas\",\"red\":\"Červená\",\"green\":\"Zelená\",\"blue\":\"Modrá\",\"alpha\":\"Alfa\"}");
+$f9cd6479f5235258a90316a784221e3b$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Modrá\",\"brightness\":\"Jas\",\"green\":\"Zelená\",\"hue\":\"Odstín\",\"lightness\":\"Světlost\",\"red\":\"Červená\",\"saturation\":\"Sytost\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/da-DK.json
 var $d9a48d423b3cf4f2d44abe3c990b$exports = {};
-$d9a48d423b3cf4f2d44abe3c990b$exports = JSON.parse("{\"hue\":\"Nuance\",\"saturation\":\"Mætning\",\"lightness\":\"Lysstyrke\",\"brightness\":\"Værdi\",\"red\":\"Rød\",\"green\":\"Grøn\",\"blue\":\"Blå\",\"alpha\":\"Alfa\"}");
+$d9a48d423b3cf4f2d44abe3c990b$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blå\",\"brightness\":\"Lysstyrke\",\"green\":\"Grøn\",\"hue\":\"Tone\",\"lightness\":\"Lyshed\",\"red\":\"Rød\",\"saturation\":\"Farvemætning\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/de-DE.json
 var $c98aec81a0d1f104658866432f$exports = {};
-$c98aec81a0d1f104658866432f$exports = JSON.parse("{\"hue\":\"Farbton\",\"saturation\":\"Sättigung\",\"lightness\":\"Leuchtkraft\",\"brightness\":\"Helligkeit\",\"red\":\"Rot\",\"green\":\"Grün\",\"blue\":\"Blau\",\"alpha\":\"Alpha\"}");
+$c98aec81a0d1f104658866432f$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Blau\",\"brightness\":\"Helligkeit\",\"green\":\"Grün\",\"hue\":\"Farbton\",\"lightness\":\"Leuchtkraft\",\"red\":\"Rot\",\"saturation\":\"Sättigung\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/el-GR.json
 var $d448bd8618b5533ccc4a8cc128b5f05a$exports = {};
-$d448bd8618b5533ccc4a8cc128b5f05a$exports = JSON.parse("{\"hue\":\"Απόχρωση\",\"saturation\":\"Κορεσμού\",\"lightness\":\"Φωτεινότητα\",\"brightness\":\"Τιμή\",\"red\":\"Κόκκινο\",\"green\":\"Πράσινο\",\"blue\":\"Μπλε\",\"alpha\":\"Αλφα\"}");
+$d448bd8618b5533ccc4a8cc128b5f05a$exports = JSON.parse("{\"alpha\":\"Άλφα\",\"blue\":\"Μπλε\",\"brightness\":\"Φωτεινότητα\",\"green\":\"Πράσινο\",\"hue\":\"Τόνος\",\"lightness\":\"Φωτεινότητα\",\"red\":\"Κόκκινο\",\"saturation\":\"Κορεσμός\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/en-US.json
@@ -34,78 +34,81 @@ var $eaffba4fd6d2bfdbccc895c90029fc1b$exports = {};
 var $ba4a9d986c77d6b793c00d1e2392bade$exports = {};
-$ba4a9d986c77d6b793c00d1e2392bade$exports = JSON.parse("{\"hue\":\"Matiz\",\"saturation\":\"Saturación\",\"lightness\":\"Claridad\",\"brightness\":\"Brillo\",\"red\":\"Rojo\",\"green\":\"Verde\",\"blue\":\"Azul\",\"alpha\":\"Alfa\"}");
+$ba4a9d986c77d6b793c00d1e2392bade$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Azul\",\"brightness\":\"Brillo\",\"green\":\"Verde\",\"hue\":\"Tono\",\"lightness\":\"Luminosidad\",\"red\":\"Rojo\",\"saturation\":\"Saturación\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/et-EE.json
 var $eea6c1402487c18ea84576423346b15$exports = {};
-$eea6c1402487c18ea84576423346b15$exports = JSON.parse("{\"hue\":\"Toon\",\"saturation\":\"Küllastus\",\"lightness\":\"Helendus\",\"brightness\":\"Väärtus\",\"red\":\"Punane\",\"green\":\"Roheline\",\"blue\":\"Sinine\",\"alpha\":\"Alfa\"}");
+$eea6c1402487c18ea84576423346b15$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Sinine\",\"brightness\":\"Heledus\",\"green\":\"Roheline\",\"hue\":\"Värv\",\"lightness\":\"Valgus\",\"red\":\"Punane\",\"saturation\":\"Küllastus\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/fi-FI.json
 var $a74db7b52c67c25bc7440950d823b$exports = {};
-$a74db7b52c67c25bc7440950d823b$exports = JSON.parse("{\"hue\":\"Värisävy\",\"saturation\":\"Kylläisyys\",\"lightness\":\"Valoisuus\",\"brightness\":\"Kirkkaus\",\"red\":\"Punainen\",\"green\":\"Vihreä\",\"blue\":\"Sininen\",\"alpha\":\"Alpha\"}");
+$a74db7b52c67c25bc7440950d823b$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Sininen\",\"brightness\":\"Kirkkaus\",\"green\":\"Vihreä\",\"hue\":\"Sävy\",\"lightness\":\"Valomäärä\",\"red\":\"Punainen\",\"saturation\":\"Värikylläisyys\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/fr-FR.json
 var $fe5ec5953266844aed13956bf74a814$exports = {};
-$fe5ec5953266844aed13956bf74a814$exports = JSON.parse("{\"hue\":\"Teinte\",\"saturation\":\"Saturation\",\"lightness\":\"Clarté\",\"brightness\":\"Luminosité\",\"red\":\"Rouge\",\"green\":\"Vert\",\"blue\":\"Bleu\",\"alpha\":\"Alpha\"}");
+$fe5ec5953266844aed13956bf74a814$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Bleu\",\"brightness\":\"Luminosité\",\"green\":\"Vert\",\"hue\":\"Teinte\",\"lightness\":\"Luminosité\",\"red\":\"Rouge\",\"saturation\":\"Saturation\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/he-IL.json
 var $c8b18e3105ca2bd3791c8ba8d5c080e9$exports = {};
-$c8b18e3105ca2bd3791c8ba8d5c080e9$exports = JSON.parse("{\"hue\":\"גוון\",\"saturation\":\"רוויה\",\"lightness\":\"‏‏בהירות\",\"brightness\":\"וערך\",\"red\":\"אדום\",\"green\":\"ירוק\",\"blue\":\"כחול\",\"alpha\":\"אלפא\"}");
+$c8b18e3105ca2bd3791c8ba8d5c080e9$exports = JSON.parse("{\"alpha\":\"אלפא\",\"blue\":\"כחול\",\"brightness\":\"בהירות\",\"green\":\"ירוק\",\"hue\":\"גוון\",\"lightness\":\"כמות אור\",\"red\":\"אדום\",\"saturation\":\"רוויה\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/hr-HR.json
 var $b91aba8d136e0d182ab14d$exports = {};
-$b91aba8d136e0d182ab14d$exports = JSON.parse("{\"hue\":\"Nijansa\",\"saturation\":\"Zasićenje\",\"lightness\":\"Svjetlina\",\"brightness\":\"Vrijednost\",\"red\":\"Crvena\",\"green\":\"Zelena\",\"blue\":\"Plava\",\"alpha\":\"Alfa\"}");
+$b91aba8d136e0d182ab14d$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Plava\",\"brightness\":\"Svjetlina\",\"green\":\"Zelena\",\"hue\":\"Nijansa\",\"lightness\":\"Osvijetljenost\",\"red\":\"Crvena\",\"saturation\":\"Zasićenost\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/hu-HU.json
 var $e4a95e1cff41940abe4abd86d$exports = {};
-$e4a95e1cff41940abe4abd86d$exports = JSON.parse("{\"hue\":\"Árnyalat\",\"saturation\":\"Telítettség\",\"lightness\":\"Fényerő\",\"brightness\":\"Értéke\",\"red\":\"Vörös\",\"green\":\"Zöld\",\"blue\":\"Kék\",\"alpha\":\"Alfa\"}");
+$e4a95e1cff41940abe4abd86d$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Kék\",\"brightness\":\"Fényesség\",\"green\":\"Zöld\",\"hue\":\"Színárnyalat\",\"lightness\":\"Világosság\",\"red\":\"Piros\",\"saturation\":\"Telítettség\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/it-IT.json
 var $cc9b471008e063931f187b9f17ea84$exports = {};
-$cc9b471008e063931f187b9f17ea84$exports = JSON.parse("{\"hue\":\"Tonalità\",\"saturation\":\"Saturazione\",\"lightness\":\"Luminosità\",\"brightness\":\"Lucentezza\",\"red\":\"Rosso\",\"green\":\"Verde\",\"blue\":\"Blu\",\"alpha\":\"Alfa\"}");
+$cc9b471008e063931f187b9f17ea84$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blu\",\"brightness\":\"Luminosità\",\"green\":\"Verde\",\"hue\":\"Tonalità\",\"lightness\":\"Luminosità\",\"red\":\"Rosso\",\"saturation\":\"Saturazione\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/ja-JP.json
 var $b3ba4812949b99f64ae9c5343cef182$exports = {};
-$b3ba4812949b99f64ae9c5343cef182$exports = JSON.parse("{\"hue\":\"色合い\",\"saturation\":\"鮮やかさ\",\"lightness\":\"輝度\",\"brightness\":\"明るさ\",\"red\":\"赤\",\"green\":\"緑\",\"blue\":\"青\",\"alpha\":\"アルファ\"}");
+$b3ba4812949b99f64ae9c5343cef182$exports = JSON.parse("{\"alpha\":\"アルファ\",\"blue\":\"青\",\"brightness\":\"明るさ\",\"green\":\"緑\",\"hue\":\"色相\",\"lightness\":\"明度\",\"red\":\"赤\",\"saturation\":\"彩度\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/ko-KR.json
 var $a0635388d1896feed826078018e61cc3$exports = {};
-$a0635388d1896feed826078018e61cc3$exports = JSON.parse("{\"hue\":\"색상\",\"saturation\":\"채도\",\"lightness\":\"명도\",\"brightness\":\"값\",\"red\":\"빨강\",\"green\":\"녹색\",\"blue\":\"파랑\",\"alpha\":\"알파\"}");
+$a0635388d1896feed826078018e61cc3$exports = JSON.parse("{\"alpha\":\"알파\",\"blue\":\"파랑\",\"brightness\":\"명도\",\"green\":\"초록\",\"hue\":\"색조\",\"lightness\":\"밝기\",\"red\":\"빨강\",\"saturation\":\"채도\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/lt-LT.json
 var $b723c6ed4b6433c464915f350d7b37d$exports = {};
-$b723c6ed4b6433c464915f350d7b37d$exports = JSON.parse("{\"hue\":\"Atspalvis\",\"saturation\":\"Grynis\",\"lightness\":\"Skaistis\",\"brightness\":\"Ryškumas\",\"red\":\"Raudona\",\"green\":\"Žalia\",\"blue\":\"Mėlyna\",\"alpha\":\"Alfa\"}");
+$b723c6ed4b6433c464915f350d7b37d$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Mėlyna\",\"brightness\":\"Ryškumas\",\"green\":\"Žalia\",\"hue\":\"Atspalvis\",\"lightness\":\"Šviesumas\",\"red\":\"Raudona\",\"saturation\":\"Įsotinimas\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/lv-LV.json
 var $de160269d06dd11d79a46ad67519$exports = {};
-$de160269d06dd11d79a46ad67519$exports = JSON.parse("{\"hue\":\"Nokrāsa\",\"saturation\":\"Piesātinājums\",\"lightness\":\"Vieglums\",\"brightness\":\"Spilgtums\",\"red\":\"Sarkana\",\"green\":\"Zaļa\",\"blue\":\"Zila\",\"alpha\":\"Alfa\"}");
+$de160269d06dd11d79a46ad67519$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Zila\",\"brightness\":\"Spilgtums\",\"green\":\"Zaļa\",\"hue\":\"Nokrāsa\",\"lightness\":\"Gaišums\",\"red\":\"Sarkana\",\"saturation\":\"Piesātinājums\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/nb-NO.json
 var $df7f70de921632c10878ba1ec274be$exports = {};
-$df7f70de921632c10878ba1ec274be$exports = JSON.parse("{\"hue\":\"Fargetone\",\"saturation\":\"Metning\",\"lightness\":\"Lyshet\",\"brightness\":\"Lysstyrke\",\"red\":\"Rød\",\"green\":\"Grønn\",\"blue\":\"Blå\",\"alpha\":\"Alfa\"}");
+$df7f70de921632c10878ba1ec274be$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blå\",\"brightness\":\"Lysstyrke\",\"green\":\"Grønn\",\"hue\":\"Fargetone\",\"lightness\":\"Lyshet\",\"red\":\"Rød\",\"saturation\":\"Metning\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/nl-NL.json
 var $f815b3f638134acc513a2b0c77d8dce0$exports = {};
-$f815b3f638134acc513a2b0c77d8dce0$exports = JSON.parse("{\"hue\":\"Tint\",\"saturation\":\"Verzadiging\",\"lightness\":\"Lichtheid\",\"brightness\":\"Helderheid\",\"red\":\"Rood\",\"green\":\"Groen\",\"blue\":\"Blauw\",\"alpha\":\"Alfa\"}");
+$f815b3f638134acc513a2b0c77d8dce0$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blauw\",\"brightness\":\"Helderheid\",\"green\":\"Groen\",\"hue\":\"Kleurtoon\",\"lightness\":\"Lichtsterkte\",\"red\":\"Rood\",\"saturation\":\"Verzadiging\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/pl-PL.json
 var $aee27b855fc838cae4ebd8dfbbb95e33$exports = {};
-$aee27b855fc838cae4ebd8dfbbb95e33$exports = JSON.parse("{\"hue\":\"Odcień\",\"saturation\":\"Nasycenie\",\"lightness\":\"Jasność\",\"brightness\":\"Jasność\",\"red\":\"Czerwony\",\"green\":\"Zielony\",\"blue\":\"Niebieski\",\"alpha\":\"Alfa\"}");
+$aee27b855fc838cae4ebd8dfbbb95e33$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Niebieski\",\"brightness\":\"Jasność\",\"green\":\"Zielony\",\"hue\":\"Odcień\",\"lightness\":\"Jaskrawość\",\"red\":\"Czerwony\",\"saturation\":\"Nasycenie\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/pt-BR.json
 var $b361c9c44348e09361feb2ebb7e33$exports = {};
-$b361c9c44348e09361feb2ebb7e33$exports = JSON.parse("{\"hue\":\"Matiz\",\"saturation\":\"Saturação\",\"lightness\":\"Luminosidade\",\"brightness\":\"Brilho\",\"red\":\"Vermelho\",\"green\":\"Verde\",\"blue\":\"Azul\",\"alpha\":\"Alfa\"}");
+$b361c9c44348e09361feb2ebb7e33$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Azul\",\"brightness\":\"Brilho\",\"green\":\"Verde\",\"hue\":\"Matiz\",\"lightness\":\"Luminosidade\",\"red\":\"Vermelho\",\"saturation\":\"Saturação\"}");
+// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/pt-PT.json
+var $d6cb1234c3b503df17397aae027f5d6f$exports = {};
+$d6cb1234c3b503df17397aae027f5d6f$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Azul\",\"brightness\":\"Luminosidade\",\"green\":\"Verde\",\"hue\":\"Tonalidade\",\"lightness\":\"Claridade\",\"red\":\"Vermelho\",\"saturation\":\"Saturação\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/ro-RO.json
 var $b8d88afd8f44c22874b7fe6f22d03d1$exports = {};
-$b8d88afd8f44c22874b7fe6f22d03d1$exports = JSON.parse("{\"hue\":\"Nuanță\",\"saturation\":\"Saturație\",\"lightness\":\"Luminozitate\",\"brightness\":\"Valoare\",\"red\":\"Roșu\",\"green\":\"Verde\",\"blue\":\"Albastru\",\"alpha\":\"Alfa\"}");
+$b8d88afd8f44c22874b7fe6f22d03d1$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Albastru\",\"brightness\":\"Luminozitate\",\"green\":\"Verde\",\"hue\":\"Nuanță\",\"lightness\":\"Luminozitate\",\"red\":\"Roșu\",\"saturation\":\"Saturație\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/ru-RU.json
 var $c188a27cabc6e80207754236eb1fec$exports = {};
-$c188a27cabc6e80207754236eb1fec$exports = JSON.parse("{\"hue\":\"Оттенок\",\"saturation\":\"Насыщенность\",\"lightness\":\"Освещенность\",\"brightness\":\"Яркость\",\"red\":\"Красный\",\"green\":\"Зеленый\",\"blue\":\"Синий\",\"alpha\":\"Альфа\"}");
+$c188a27cabc6e80207754236eb1fec$exports = JSON.parse("{\"alpha\":\"Альфа\",\"blue\":\"Синий\",\"brightness\":\"Яркость\",\"green\":\"Зеленый\",\"hue\":\"Оттенок\",\"lightness\":\"Освещенность\",\"red\":\"Красный\",\"saturation\":\"Насыщенность\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/sk-SK.json
 var $c40950a3513f1cbbb70121cc402a156f$exports = {};
-$c40950a3513f1cbbb70121cc402a156f$exports = JSON.parse("{\"hue\":\"Odtieň\",\"saturation\":\"Sýtosť\",\"lightness\":\"Svetlosť\",\"brightness\":\"Jas\",\"red\":\"Červená\",\"green\":\"Zelená\",\"blue\":\"Modrá\",\"alpha\":\"Alfa\"}");
+$c40950a3513f1cbbb70121cc402a156f$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Modrá\",\"brightness\":\"Jas\",\"green\":\"Zelená\",\"hue\":\"Odtieň\",\"lightness\":\"Svetlosť\",\"red\":\"Červená\",\"saturation\":\"Sýtosť\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/sl-SI.json
 var $d6ba833b474990359bcaf23ae4062a5a$exports = {};
-$d6ba833b474990359bcaf23ae4062a5a$exports = JSON.parse("{\"hue\":\"Odtenek\",\"saturation\":\"Nasičenost\",\"lightness\":\"Svetilnost\",\"brightness\":\"Svetlost\",\"red\":\"Rdeča\",\"green\":\"Zelena\",\"blue\":\"Modra\",\"alpha\":\"Alfa\"}");
+$d6ba833b474990359bcaf23ae4062a5a$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Modra\",\"brightness\":\"Svetlost\",\"green\":\"Zelena\",\"hue\":\"Barva\",\"lightness\":\"Lahkost\",\"red\":\"Rdeča\",\"saturation\":\"Nasičenost\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/sr-SP.json
 var $b540c0afbb8586393249300b9d058750$exports = {};
-$b540c0afbb8586393249300b9d058750$exports = JSON.parse("{\"hue\":\"Нијанса\",\"saturation\":\"Засићење\",\"lightness\":\"Осветљење\",\"brightness\":\"Светлина\",\"red\":\"Црвена\",\"green\":\"Зелена\",\"blue\":\"Плава\",\"alpha\":\"Алфа\"}");
+$b540c0afbb8586393249300b9d058750$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Plava\",\"brightness\":\"Osvetljenost\",\"green\":\"Zelena\",\"hue\":\"Nijansa\",\"lightness\":\"Osvetljenje\",\"red\":\"Crvena\",\"saturation\":\"Zasićenje\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/sv-SE.json
 var $f6f532bfe6495593ae520210aedcf6ee$exports = {};
-$f6f532bfe6495593ae520210aedcf6ee$exports = JSON.parse("{\"hue\":\"Nyans\",\"saturation\":\"Mättnad\",\"lightness\":\"Lätthet\",\"brightness\":\"Ljusstyrka\",\"red\":\"Röd\",\"green\":\"Grön\",\"blue\":\"Blå\",\"alpha\":\"Alfa\"}");
+$f6f532bfe6495593ae520210aedcf6ee$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blått\",\"brightness\":\"Ljusstyrka\",\"green\":\"Grönt\",\"hue\":\"Nyans\",\"lightness\":\"Ljushet\",\"red\":\"Rött\",\"saturation\":\"Mättnad\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/tr-TR.json
 var $b002567dfed5d0563037184fe514$exports = {};
-$b002567dfed5d0563037184fe514$exports = JSON.parse("{\"hue\":\"Ton\",\"saturation\":\"Doygunluk\",\"lightness\":\"Hafiflik\",\"brightness\":\"Parlaklık\",\"red\":\"Kırmızı\",\"green\":\"Yeşil\",\"blue\":\"Mavi\",\"alpha\":\"Alfa\"}");
+$b002567dfed5d0563037184fe514$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Mavi\",\"brightness\":\"Parlaklık\",\"green\":\"Yeşil\",\"hue\":\"Ton\",\"lightness\":\"Canlılık\",\"red\":\"Kırmızı\",\"saturation\":\"Doygunluk\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/uk-UA.json
 var $e3caa848bb758a1d3e6ca0f18ece7f4$exports = {};
-$e3caa848bb758a1d3e6ca0f18ece7f4$exports = JSON.parse("{\"hue\":\"Відтінок\",\"saturation\":\"Насиченість\",\"lightness\":\"Яскравість\",\"brightness\":\"Інтенсивність\",\"red\":\"Червоний\",\"green\":\"Зелений\",\"blue\":\"Синій\",\"alpha\":\"Альфа\"}");
+$e3caa848bb758a1d3e6ca0f18ece7f4$exports = JSON.parse("{\"alpha\":\"Альфа\",\"blue\":\"Синій\",\"brightness\":\"Яскравість\",\"green\":\"Зелений\",\"hue\":\"Тон\",\"lightness\":\"Освітленість\",\"red\":\"Червоний\",\"saturation\":\"Насиченість\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/zh-CN.json
 var $d24ec9fef3a39ede5b3f154080d42$exports = {};
-$d24ec9fef3a39ede5b3f154080d42$exports = JSON.parse("{\"hue\":\"色调\",\"saturation\":\"饱和度\",\"lightness\":\"光度\",\"brightness\":\"Brightness\",\"red\":\"红\",\"green\":\"绿\",\"blue\":\"蓝\",\"alpha\":\"Alpha\"}");
+$d24ec9fef3a39ede5b3f154080d42$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"蓝色\",\"brightness\":\"亮度\",\"green\":\"绿色\",\"hue\":\"色相\",\"lightness\":\"明亮度\",\"red\":\"红色\",\"saturation\":\"饱和度\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/zh-TW.json
 var $a1e968ea81ccd941358c63d78a093ff0$exports = {};
-$a1e968ea81ccd941358c63d78a093ff0$exports = JSON.parse("{\"hue\":\"色調\",\"saturation\":\"飽和\",\"lightness\":\"光度\",\"brightness\":\"亮度\",\"red\":\"紅\",\"green\":\"綠\",\"blue\":\"藍\",\"alpha\":\"Alpha\"}");
+$a1e968ea81ccd941358c63d78a093ff0$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"藍色\",\"brightness\":\"亮度\",\"green\":\"綠色\",\"hue\":\"色相\",\"lightness\":\"明亮\",\"red\":\"紅色\",\"saturation\":\"飽和度\"}");
 // @ts-ignore
@@ -136,2 +139,3 @@ const $db5f3c2f048bca5be854d051d3f2729$var$intlMessages = {
   "pt-BR": _babelRuntimeHelpersEsmInteropRequireDefault($b361c9c44348e09361feb2ebb7e33$exports).default,
+  "pt-PT": _babelRuntimeHelpersEsmInteropRequireDefault($d6cb1234c3b503df17397aae027f5d6f$exports).default,
   "ro-RO": _babelRuntimeHelpersEsmInteropRequireDefault($b8d88afd8f44c22874b7fe6f22d03d1$exports).default,
@@ -149,2 +153,4 @@ "ru-RU": _babelRuntimeHelpersEsmInteropRequireDefault($c188a27cabc6e80207754236eb1fec$exports).default,
 const $db5f3c2f048bca5be854d051d3f2729$var$messages = new MessageDictionary($db5f3c2f048bca5be854d051d3f2729$var$intlMessages);
+/** Parses a color from a string value. Throws an error if the string could not be parsed. */
+
 export function parseColor(value) {
@@ -735,2 +741,3 @@ let res = $db5f3c2f048bca5be854d051d3f2729$var$RGBColor.parse(value) || $db5f3c2f048bca5be854d051d3f2729$var$HSBColor.parse(value) || $db5f3c2f048bca5be854d051d3f2729$var$HSLColor.parse(value);
     onChange,
+    onChangeEnd,
     step = 1
@@ -744,2 +751,4 @@ } = props;
   let [value, setValue] = useControlledState($a54bad0097d5f20f12ac194ac13764$var$normalizeColor(props.value), $a54bad0097d5f20f12ac194ac13764$var$normalizeColor(defaultValue), onChange);
+  let valueRef = useRef(value);
+  valueRef.current = value;
   let [isDragging, setDragging] = useState(false);
@@ -765,3 +774,5 @@ let hue = value.getChannelValue('hue');
     setValue(v) {
-      setValue($a54bad0097d5f20f12ac194ac13764$var$normalizeColor(v));
+      let color = $a54bad0097d5f20f12ac194ac13764$var$normalizeColor(v);
+      valueRef.current = color;
+      setValue(color);
     },
@@ -811,7 +822,18 @@
 
-    setDragging(value) {
-      setDragging(value);
+    setDragging(isDragging) {
+      setDragging(wasDragging => {
+        if (onChangeEnd && !isDragging && wasDragging) {
+          onChangeEnd(valueRef.current);
+        }
+
+        return isDragging;
+      });
     },
 
-    isDragging
+    isDragging,
+
+    getDisplayColor() {
+      return value.withChannelValue('saturation', 100).withChannelValue('lightness', 50);
+    }
+
   };
@@ -818,0 +840,0 @@ }

dist/types.d.ts

 import { Color, ColorSliderProps, ColorWheelProps, ColorFieldProps } from "@react-types/color";
 import { SliderState } from "@react-stately/slider";
+/** Parses a color from a string value. Throws an error if the string could not be parsed. */
 export function parseColor(value: string): Color;
@@ -22,5 +23,5 @@ export interface ColorSliderState extends SliderState {
 export interface ColorWheelState {
-    /** The current color value displayed by the color wheel. */
+    /** The current color value represented by the color wheel. */
     readonly value: Color;
-    /** Sets the color value displayed by the color wheel, and triggers `onChange`. */
+    /** Sets the color value represented by the color wheel, and triggers `onChange`. */
     setValue(value: string | Color): void;
@@ -42,6 +43,8 @@ /** The current value of the hue channel displayed by the color wheel. */
     decrement(minStepSize?: number): void;
-    /** Whether the cxolor wheel is currently being dragged. */
+    /** Whether the color wheel is currently being dragged. */
     readonly isDragging: boolean;
     /** Sets whether the color wheel is being dragged. */
     setDragging(value: boolean): void;
+    /** Returns the color that should be displayed in the color wheel instead of `value`. */
+    getDisplayColor(): Color;
 }
@@ -48,0 +51,0 @@ /**

package.json

 {
   "name": "@react-stately/color",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-beta.0",
   "description": "Spectrum UI components in React",
@@ -21,9 +21,9 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@internationalized/message": "3.0.0-alpha.0",
-    "@internationalized/number": "3.0.0-alpha.0",
-    "@react-aria/utils": "^3.6.0",
+    "@internationalized/message": "3.0.0-rc.0",
+    "@internationalized/number": "3.0.0-rc.0",
+    "@react-aria/utils": "^3.7.0",
     "@react-stately/slider": "^3.0.1",
     "@react-stately/utils": "^3.2.0",
-    "@react-types/color": "3.0.0-alpha.0",
-    "@react-types/numberfield": "3.0.0-alpha.0"
+    "@react-types/color": "3.0.0-beta.0",
+    "@react-types/numberfield": "3.0.0-rc.0"
   },
@@ -36,3 +36,3 @@ "peerDependencies": {
   },
-  "gitHead": "7f9dc7fa5144679d2dc733170cb5c1f40d0c5ee5"
+  "gitHead": "9920ffaa2596a03c4498a15cb940bd2f4ba5cd6a"
 }

src/Color.ts

@@ -22,2 +22,3 @@ /*
 
+/** Parses a color from a string value. Throws an error if the string could not be parsed. */
 export function parseColor(value: string): IColor {
@@ -24,0 +25,0 @@ let res = RGBColor.parse(value) || HSBColor.parse(value) || HSLColor.parse(value);

src/useColorWheelState.ts

@@ -16,8 +16,8 @@ /*
 import {useControlledState} from '@react-stately/utils';
-import {useState} from 'react';
+import {useRef, useState} from 'react';
 
 export interface ColorWheelState {
-  /** The current color value displayed by the color wheel. */
+  /** The current color value represented by the color wheel. */
   readonly value: Color,
-  /** Sets the color value displayed by the color wheel, and triggers `onChange`. */
+  /** Sets the color value represented by the color wheel, and triggers `onChange`. */
   setValue(value: string | Color): void,
@@ -40,6 +40,8 @@
 
-  /** Whether the cxolor wheel is currently being dragged. */
+  /** Whether the color wheel is currently being dragged. */
   readonly isDragging: boolean,
   /** Sets whether the color wheel is being dragged. */
-  setDragging(value: boolean): void
+  setDragging(value: boolean): void,
+  /** Returns the color that should be displayed in the color wheel instead of `value`. */
+  getDisplayColor(): Color
 }
@@ -100,3 +102,3 @@
 export function useColorWheelState(props: ColorWheelProps): ColorWheelState {
-  let {defaultValue, onChange, step = 1} = props;
+  let {defaultValue, onChange, onChangeEnd, step = 1} = props;
 
@@ -108,2 +110,5 @@ if (!props.value && !defaultValue) {
   let [value, setValue] = useControlledState(normalizeColor(props.value), normalizeColor(defaultValue), onChange);
+  let valueRef = useRef(value);
+  valueRef.current = value;
+
   let [isDragging, setDragging] = useState(false);
@@ -126,3 +131,5 @@
     setValue(v) {
-      setValue(normalizeColor(v));
+      let color = normalizeColor(v);
+      valueRef.current = color;
+      setValue(color);
     },
@@ -155,7 +162,16 @@ hue,
     },
-    setDragging(value) {
-      setDragging(value);
+    setDragging(isDragging) {
+      setDragging(wasDragging => {
+        if (onChangeEnd && !isDragging && wasDragging) {
+          onChangeEnd(valueRef.current);
+        }
+
+        return isDragging;
+      });
     },
-    isDragging
+    isDragging,
+    getDisplayColor() {
+      return value.withChannelValue('saturation', 100).withChannelValue('lightness', 50);
+    }
   };
 }

No alert changes

Improved metrics

Total package byte prevSize

250186

increased by2.42%

Lines of code

2417

increased by2.24%

Dependency changes

• + Added@internationalized/message@3.0.0-rc.0(transitive)

• + Added@internationalized/number@3.0.0-rc.0(transitive)

• + Added@react-types/color@3.0.0-beta.0(transitive)

• + Added@react-types/numberfield@3.0.0-rc.0(transitive)

• - Removed@internationalized/message@3.0.0-alpha.0(transitive)

• - Removed@internationalized/number@3.0.0-alpha.0(transitive)

• - Removed@react-types/color@3.0.0-alpha.0(transitive)

• - Removed@react-types/numberfield@3.0.0-alpha.0(transitive)

• Updated@internationalized/message@3.0.0-rc.0

• Updated@internationalized/number@3.0.0-rc.0

• Updated@react-aria/utils@^3.7.0

• Updated@react-types/color@3.0.0-beta.0

• Updated@react-types/numberfield@3.0.0-rc.0