@react-stately/color 3.5.4-nightly.4552 → 3.5.4-nightly.4558

package/dist/uk-UA.main.js

@@ -7,8 +7,8 @@ module.exports = {
     "lightness": `\u{41E}\u{441}\u{432}\u{456}\u{442}\u{43B}\u{435}\u{43D}\u{456}\u{441}\u{442}\u{44C}`,
     "red": `\u{427}\u{435}\u{440}\u{432}\u{43E}\u{43D}\u{438}\u{439}`,
     "saturation": `\u{41D}\u{430}\u{441}\u{438}\u{447}\u{435}\u{43D}\u{456}\u{441}\u{442}\u{44C}`,
-    "colorName": (args)=>`${args.transparency} ${args.lightness} ${args.chroma} ${args.hue}`,
-    "transparency": (args)=>`${args.percent} transparent`,
+    "colorName": (args)=>`${args.lightness} ${args.chroma} ${args.hue}`,
+    "transparentColorName": (args)=>`${args.lightness} ${args.chroma} ${args.hue}, ${args.percentTransparent} transparent`,
     "very dark": `very dark`,
     "dark": `dark`,
     "light": `light`,

package/dist/uk-UA.main.js.map

@@ -1 +1 @@
-{"mappings":"AAAA,iBAAiB;IAAG,SAAS,CAAC,mCAAK,CAAC;IAClC,QAAQ,CAAC,mCAAK,CAAC;IACf,cAAc,CAAC,sEAAU,CAAC;IAC1B,SAAS,CAAC,iDAAO,CAAC;IAClB,OAAO,CAAC,qBAAG,CAAC;IACZ,aAAa,CAAC,oFAAY,CAAC;IAC3B,OAAO,CAAC,wDAAQ,CAAC;IACjB,cAAc,CAAC,6EAAW,CAAC;IAC3B,aAAa,CAAC,OAAS,CAAC,EAAE,KAAK,YAAY,CAAC,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC;IAC1F,gBAAgB,CAAC,OAAS,CAAC,EAAE,KAAK,OAAO,CAAC,YAAY,CAAC;IACvD,aAAa,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,IAAI,CAAC;IACd,SAAS,CAAC,KAAK,CAAC;IAChB,cAAc,CAAC,UAAU,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC;IACd,WAAW,CAAC,OAAO,CAAC;IACpB,WAAW,CAAC,OAAO,CAAC;IACpB,SAAS,CAAC,KAAK,CAAC;IAChB,SAAS,CAAC,KAAK,CAAC;IAChB,QAAQ,CAAC,IAAI,CAAC;IACd,QAAQ,CAAC,IAAI,CAAC;IACd,YAAY,CAAC,QAAQ,CAAC;IACtB,cAAc,CAAC,UAAU,CAAC;IAC1B,SAAS,CAAC,KAAK,CAAC;IAChB,UAAU,CAAC,MAAM,CAAC;IAClB,iBAAiB,CAAC,aAAa,CAAC;IAChC,gBAAgB,CAAC,YAAY,CAAC;IAC9B,UAAU,CAAC,MAAM,CAAC;IAClB,gBAAgB,CAAC,YAAY,CAAC;IAC9B,cAAc,CAAC,UAAU,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC;IACd,aAAa,CAAC,SAAS,CAAC;IACxB,eAAe,CAAC,WAAW,CAAC;IAC5B,UAAU,CAAC,MAAM,CAAC;IAClB,kBAAkB,CAAC,cAAc,CAAC;IAClC,WAAW,CAAC,OAAO,CAAC;IACpB,gBAAgB,CAAC,YAAY,CAAC;AAChC","sources":["packages/@react-stately/color/intl/uk-UA.json"],"sourcesContent":["{\n  \"alpha\": \"Альфа\",\n  \"blue\": \"Синій\",\n  \"brightness\": \"Яскравість\",\n  \"green\": \"Зелений\",\n  \"hue\": \"Тон\",\n  \"lightness\": \"Освітленість\",\n  \"red\": \"Червоний\",\n  \"saturation\": \"Насиченість\",\n  \"colorName\": \"{transparency} {lightness} {chroma} {hue}\",\n  \"transparency\": \"{percent} transparent\",\n  \"very dark\": \"very dark\",\n  \"dark\": \"dark\",\n  \"light\": \"light\",\n  \"very light\": \"very light\",\n  \"pale\": \"pale\",\n  \"grayish\": \"grayish\",\n  \"vibrant\": \"vibrant\",\n  \"black\": \"black\",\n  \"white\": \"white\",\n  \"gray\": \"gray\",\n  \"pink\": \"pink\",\n  \"pink red\": \"pink red\",\n  \"red orange\": \"red orange\",\n  \"brown\": \"brown\",\n  \"orange\": \"orange\",\n  \"orange yellow\": \"orange yellow\",\n  \"brown yellow\": \"brown yellow\",\n  \"yellow\": \"yellow\",\n  \"yellow green\": \"yellow green\",\n  \"green cyan\": \"green cyan\",\n  \"cyan\": \"cyan\",\n  \"cyan blue\": \"cyan blue\",\n  \"blue purple\": \"blue purple\",\n  \"purple\": \"purple\",\n  \"purple magenta\": \"purple magenta\",\n  \"magenta\": \"magenta\",\n  \"magenta pink\": \"magenta pink\"\n}\n"],"names":[],"version":3,"file":"uk-UA.main.js.map"}
+{"mappings":"AAAA,iBAAiB;IAAG,SAAS,CAAC,mCAAK,CAAC;IAClC,QAAQ,CAAC,mCAAK,CAAC;IACf,cAAc,CAAC,sEAAU,CAAC;IAC1B,SAAS,CAAC,iDAAO,CAAC;IAClB,OAAO,CAAC,qBAAG,CAAC;IACZ,aAAa,CAAC,oFAAY,CAAC;IAC3B,OAAO,CAAC,wDAAQ,CAAC;IACjB,cAAc,CAAC,6EAAW,CAAC;IAC3B,aAAa,CAAC,OAAS,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC;IACrE,wBAAwB,CAAC,OAAS,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,EAAE,KAAK,kBAAkB,CAAC,YAAY,CAAC;IACxH,aAAa,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,IAAI,CAAC;IACd,SAAS,CAAC,KAAK,CAAC;IAChB,cAAc,CAAC,UAAU,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC;IACd,WAAW,CAAC,OAAO,CAAC;IACpB,WAAW,CAAC,OAAO,CAAC;IACpB,SAAS,CAAC,KAAK,CAAC;IAChB,SAAS,CAAC,KAAK,CAAC;IAChB,QAAQ,CAAC,IAAI,CAAC;IACd,QAAQ,CAAC,IAAI,CAAC;IACd,YAAY,CAAC,QAAQ,CAAC;IACtB,cAAc,CAAC,UAAU,CAAC;IAC1B,SAAS,CAAC,KAAK,CAAC;IAChB,UAAU,CAAC,MAAM,CAAC;IAClB,iBAAiB,CAAC,aAAa,CAAC;IAChC,gBAAgB,CAAC,YAAY,CAAC;IAC9B,UAAU,CAAC,MAAM,CAAC;IAClB,gBAAgB,CAAC,YAAY,CAAC;IAC9B,cAAc,CAAC,UAAU,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC;IACd,aAAa,CAAC,SAAS,CAAC;IACxB,eAAe,CAAC,WAAW,CAAC;IAC5B,UAAU,CAAC,MAAM,CAAC;IAClB,kBAAkB,CAAC,cAAc,CAAC;IAClC,WAAW,CAAC,OAAO,CAAC;IACpB,gBAAgB,CAAC,YAAY,CAAC;AAChC","sources":["packages/@react-stately/color/intl/uk-UA.json"],"sourcesContent":["{\n  \"alpha\": \"Альфа\",\n  \"blue\": \"Синій\",\n  \"brightness\": \"Яскравість\",\n  \"green\": \"Зелений\",\n  \"hue\": \"Тон\",\n  \"lightness\": \"Освітленість\",\n  \"red\": \"Червоний\",\n  \"saturation\": \"Насиченість\",\n  \"colorName\": \"{lightness} {chroma} {hue}\",\n  \"transparentColorName\": \"{lightness} {chroma} {hue}, {percentTransparent} transparent\",\n  \"very dark\": \"very dark\",\n  \"dark\": \"dark\",\n  \"light\": \"light\",\n  \"very light\": \"very light\",\n  \"pale\": \"pale\",\n  \"grayish\": \"grayish\",\n  \"vibrant\": \"vibrant\",\n  \"black\": \"black\",\n  \"white\": \"white\",\n  \"gray\": \"gray\",\n  \"pink\": \"pink\",\n  \"pink red\": \"pink red\",\n  \"red orange\": \"red orange\",\n  \"brown\": \"brown\",\n  \"orange\": \"orange\",\n  \"orange yellow\": \"orange yellow\",\n  \"brown yellow\": \"brown yellow\",\n  \"yellow\": \"yellow\",\n  \"yellow green\": \"yellow green\",\n  \"green cyan\": \"green cyan\",\n  \"cyan\": \"cyan\",\n  \"cyan blue\": \"cyan blue\",\n  \"blue purple\": \"blue purple\",\n  \"purple\": \"purple\",\n  \"purple magenta\": \"purple magenta\",\n  \"magenta\": \"magenta\",\n  \"magenta pink\": \"magenta pink\"\n}\n"],"names":[],"version":3,"file":"uk-UA.main.js.map"}

package/dist/uk-UA.mjs

@@ -8,8 +8,8 @@ $0f9b1074d04f4954$exports = {
     "lightness": `\u{41E}\u{441}\u{432}\u{456}\u{442}\u{43B}\u{435}\u{43D}\u{456}\u{441}\u{442}\u{44C}`,
     "red": `\u{427}\u{435}\u{440}\u{432}\u{43E}\u{43D}\u{438}\u{439}`,
     "saturation": `\u{41D}\u{430}\u{441}\u{438}\u{447}\u{435}\u{43D}\u{456}\u{441}\u{442}\u{44C}`,
-    "colorName": (args)=>`${args.transparency} ${args.lightness} ${args.chroma} ${args.hue}`,
-    "transparency": (args)=>`${args.percent} transparent`,
+    "colorName": (args)=>`${args.lightness} ${args.chroma} ${args.hue}`,
+    "transparentColorName": (args)=>`${args.lightness} ${args.chroma} ${args.hue}, ${args.percentTransparent} transparent`,
     "very dark": `very dark`,
     "dark": `dark`,
     "light": `light`,
@@ -41,4 +41,4 @@ $0f9b1074d04f4954$exports = {
 
 
 export {$0f9b1074d04f4954$exports as default};
-//# sourceMappingURL=uk-UA.module.js.map
+//# sourceMappingURL=uk-UA.mjs.map

package/dist/uk-UA.module.js

@@ -8,8 +8,8 @@ $0f9b1074d04f4954$exports = {
     "lightness": `\u{41E}\u{441}\u{432}\u{456}\u{442}\u{43B}\u{435}\u{43D}\u{456}\u{441}\u{442}\u{44C}`,
     "red": `\u{427}\u{435}\u{440}\u{432}\u{43E}\u{43D}\u{438}\u{439}`,
     "saturation": `\u{41D}\u{430}\u{441}\u{438}\u{447}\u{435}\u{43D}\u{456}\u{441}\u{442}\u{44C}`,
-    "colorName": (args)=>`${args.transparency} ${args.lightness} ${args.chroma} ${args.hue}`,
-    "transparency": (args)=>`${args.percent} transparent`,
+    "colorName": (args)=>`${args.lightness} ${args.chroma} ${args.hue}`,
+    "transparentColorName": (args)=>`${args.lightness} ${args.chroma} ${args.hue}, ${args.percentTransparent} transparent`,
     "very dark": `very dark`,
     "dark": `dark`,
     "light": `light`,

package/dist/uk-UA.module.js.map

@@ -1 +1 @@
-{"mappings":";AAAA,4BAAiB;IAAG,SAAS,CAAC,mCAAK,CAAC;IAClC,QAAQ,CAAC,mCAAK,CAAC;IACf,cAAc,CAAC,sEAAU,CAAC;IAC1B,SAAS,CAAC,iDAAO,CAAC;IAClB,OAAO,CAAC,qBAAG,CAAC;IACZ,aAAa,CAAC,oFAAY,CAAC;IAC3B,OAAO,CAAC,wDAAQ,CAAC;IACjB,cAAc,CAAC,6EAAW,CAAC;IAC3B,aAAa,CAAC,OAAS,CAAC,EAAE,KAAK,YAAY,CAAC,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC;IAC1F,gBAAgB,CAAC,OAAS,CAAC,EAAE,KAAK,OAAO,CAAC,YAAY,CAAC;IACvD,aAAa,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,IAAI,CAAC;IACd,SAAS,CAAC,KAAK,CAAC;IAChB,cAAc,CAAC,UAAU,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC;IACd,WAAW,CAAC,OAAO,CAAC;IACpB,WAAW,CAAC,OAAO,CAAC;IACpB,SAAS,CAAC,KAAK,CAAC;IAChB,SAAS,CAAC,KAAK,CAAC;IAChB,QAAQ,CAAC,IAAI,CAAC;IACd,QAAQ,CAAC,IAAI,CAAC;IACd,YAAY,CAAC,QAAQ,CAAC;IACtB,cAAc,CAAC,UAAU,CAAC;IAC1B,SAAS,CAAC,KAAK,CAAC;IAChB,UAAU,CAAC,MAAM,CAAC;IAClB,iBAAiB,CAAC,aAAa,CAAC;IAChC,gBAAgB,CAAC,YAAY,CAAC;IAC9B,UAAU,CAAC,MAAM,CAAC;IAClB,gBAAgB,CAAC,YAAY,CAAC;IAC9B,cAAc,CAAC,UAAU,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC;IACd,aAAa,CAAC,SAAS,CAAC;IACxB,eAAe,CAAC,WAAW,CAAC;IAC5B,UAAU,CAAC,MAAM,CAAC;IAClB,kBAAkB,CAAC,cAAc,CAAC;IAClC,WAAW,CAAC,OAAO,CAAC;IACpB,gBAAgB,CAAC,YAAY,CAAC;AAChC","sources":["packages/@react-stately/color/intl/uk-UA.json"],"sourcesContent":["{\n  \"alpha\": \"Альфа\",\n  \"blue\": \"Синій\",\n  \"brightness\": \"Яскравість\",\n  \"green\": \"Зелений\",\n  \"hue\": \"Тон\",\n  \"lightness\": \"Освітленість\",\n  \"red\": \"Червоний\",\n  \"saturation\": \"Насиченість\",\n  \"colorName\": \"{transparency} {lightness} {chroma} {hue}\",\n  \"transparency\": \"{percent} transparent\",\n  \"very dark\": \"very dark\",\n  \"dark\": \"dark\",\n  \"light\": \"light\",\n  \"very light\": \"very light\",\n  \"pale\": \"pale\",\n  \"grayish\": \"grayish\",\n  \"vibrant\": \"vibrant\",\n  \"black\": \"black\",\n  \"white\": \"white\",\n  \"gray\": \"gray\",\n  \"pink\": \"pink\",\n  \"pink red\": \"pink red\",\n  \"red orange\": \"red orange\",\n  \"brown\": \"brown\",\n  \"orange\": \"orange\",\n  \"orange yellow\": \"orange yellow\",\n  \"brown yellow\": \"brown yellow\",\n  \"yellow\": \"yellow\",\n  \"yellow green\": \"yellow green\",\n  \"green cyan\": \"green cyan\",\n  \"cyan\": \"cyan\",\n  \"cyan blue\": \"cyan blue\",\n  \"blue purple\": \"blue purple\",\n  \"purple\": \"purple\",\n  \"purple magenta\": \"purple magenta\",\n  \"magenta\": \"magenta\",\n  \"magenta pink\": \"magenta pink\"\n}\n"],"names":[],"version":3,"file":"uk-UA.module.js.map"}
+{"mappings":";AAAA,4BAAiB;IAAG,SAAS,CAAC,mCAAK,CAAC;IAClC,QAAQ,CAAC,mCAAK,CAAC;IACf,cAAc,CAAC,sEAAU,CAAC;IAC1B,SAAS,CAAC,iDAAO,CAAC;IAClB,OAAO,CAAC,qBAAG,CAAC;IACZ,aAAa,CAAC,oFAAY,CAAC;IAC3B,OAAO,CAAC,wDAAQ,CAAC;IACjB,cAAc,CAAC,6EAAW,CAAC;IAC3B,aAAa,CAAC,OAAS,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC;IACrE,wBAAwB,CAAC,OAAS,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,EAAE,KAAK,kBAAkB,CAAC,YAAY,CAAC;IACxH,aAAa,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,IAAI,CAAC;IACd,SAAS,CAAC,KAAK,CAAC;IAChB,cAAc,CAAC,UAAU,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC;IACd,WAAW,CAAC,OAAO,CAAC;IACpB,WAAW,CAAC,OAAO,CAAC;IACpB,SAAS,CAAC,KAAK,CAAC;IAChB,SAAS,CAAC,KAAK,CAAC;IAChB,QAAQ,CAAC,IAAI,CAAC;IACd,QAAQ,CAAC,IAAI,CAAC;IACd,YAAY,CAAC,QAAQ,CAAC;IACtB,cAAc,CAAC,UAAU,CAAC;IAC1B,SAAS,CAAC,KAAK,CAAC;IAChB,UAAU,CAAC,MAAM,CAAC;IAClB,iBAAiB,CAAC,aAAa,CAAC;IAChC,gBAAgB,CAAC,YAAY,CAAC;IAC9B,UAAU,CAAC,MAAM,CAAC;IAClB,gBAAgB,CAAC,YAAY,CAAC;IAC9B,cAAc,CAAC,UAAU,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC;IACd,aAAa,CAAC,SAAS,CAAC;IACxB,eAAe,CAAC,WAAW,CAAC;IAC5B,UAAU,CAAC,MAAM,CAAC;IAClB,kBAAkB,CAAC,cAAc,CAAC;IAClC,WAAW,CAAC,OAAO,CAAC;IACpB,gBAAgB,CAAC,YAAY,CAAC;AAChC","sources":["packages/@react-stately/color/intl/uk-UA.json"],"sourcesContent":["{\n  \"alpha\": \"Альфа\",\n  \"blue\": \"Синій\",\n  \"brightness\": \"Яскравість\",\n  \"green\": \"Зелений\",\n  \"hue\": \"Тон\",\n  \"lightness\": \"Освітленість\",\n  \"red\": \"Червоний\",\n  \"saturation\": \"Насиченість\",\n  \"colorName\": \"{lightness} {chroma} {hue}\",\n  \"transparentColorName\": \"{lightness} {chroma} {hue}, {percentTransparent} transparent\",\n  \"very dark\": \"very dark\",\n  \"dark\": \"dark\",\n  \"light\": \"light\",\n  \"very light\": \"very light\",\n  \"pale\": \"pale\",\n  \"grayish\": \"grayish\",\n  \"vibrant\": \"vibrant\",\n  \"black\": \"black\",\n  \"white\": \"white\",\n  \"gray\": \"gray\",\n  \"pink\": \"pink\",\n  \"pink red\": \"pink red\",\n  \"red orange\": \"red orange\",\n  \"brown\": \"brown\",\n  \"orange\": \"orange\",\n  \"orange yellow\": \"orange yellow\",\n  \"brown yellow\": \"brown yellow\",\n  \"yellow\": \"yellow\",\n  \"yellow green\": \"yellow green\",\n  \"green cyan\": \"green cyan\",\n  \"cyan\": \"cyan\",\n  \"cyan blue\": \"cyan blue\",\n  \"blue purple\": \"blue purple\",\n  \"purple\": \"purple\",\n  \"purple magenta\": \"purple magenta\",\n  \"magenta\": \"magenta\",\n  \"magenta pink\": \"magenta pink\"\n}\n"],"names":[],"version":3,"file":"uk-UA.module.js.map"}

package/dist/useColor.main.js

@@ -0,0 +1,36 @@
+var $83fe1a57d631223b$exports = require("./Color.main.js");
+var $bTjYY$react = require("react");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "useColor", () => $f8b3be23ba4462b1$export$5aadd9c0606af5c2);
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+function $f8b3be23ba4462b1$export$5aadd9c0606af5c2(value) {
+    return (0, $bTjYY$react.useMemo)(()=>{
+        if (typeof value === "string") try {
+            return (0, $83fe1a57d631223b$exports.parseColor)(value);
+        } catch (err) {
+            return undefined;
+        }
+        return value;
+    }, [
+        value
+    ]);
+}
+
+
+//# sourceMappingURL=useColor.main.js.map

package/dist/useColor.main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;AAMM,SAAS,0CAAS,KAAwC;IAC/D,OAAO,CAAA,GAAA,oBAAM,EAAE;QACb,IAAI,OAAO,UAAU,UACnB,IAAI;YACF,OAAO,CAAA,GAAA,oCAAS,EAAE;QACpB,EAAE,OAAO,KAAK;YACZ,OAAO;QACT;QAEF,OAAO;IACT,GAAG;QAAC;KAAM;AACZ","sources":["packages/@react-stately/color/src/useColor.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Color} from '@react-types/color';\nimport {parseColor} from './Color';\nimport {useMemo} from 'react';\n\nexport function useColor(value: string | Color | undefined | null) {\n  return useMemo(() => {\n    if (typeof value === 'string') {\n      try {\n        return parseColor(value);\n      } catch (err) {\n        return undefined;\n      }\n    }\n    return value;\n  }, [value]);\n}\n"],"names":[],"version":3,"file":"useColor.main.js.map"}

package/dist/useColor.mjs

@@ -0,0 +1,31 @@
+import {parseColor as $799cddbef784668f$export$6e865ea70d7724f} from "./Color.mjs";
+import {useMemo as $2sEeQ$useMemo} from "react";
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+function $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(value) {
+    return (0, $2sEeQ$useMemo)(()=>{
+        if (typeof value === "string") try {
+            return (0, $799cddbef784668f$export$6e865ea70d7724f)(value);
+        } catch (err) {
+            return undefined;
+        }
+        return value;
+    }, [
+        value
+    ]);
+}
+
+
+export {$aa90ad8b2b1d015f$export$5aadd9c0606af5c2 as useColor};
+//# sourceMappingURL=useColor.mjs.map

package/dist/useColor.module.js

@@ -0,0 +1,31 @@
+import {parseColor as $799cddbef784668f$export$6e865ea70d7724f} from "./Color.module.js";
+import {useMemo as $2sEeQ$useMemo} from "react";
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+function $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(value) {
+    return (0, $2sEeQ$useMemo)(()=>{
+        if (typeof value === "string") try {
+            return (0, $799cddbef784668f$export$6e865ea70d7724f)(value);
+        } catch (err) {
+            return undefined;
+        }
+        return value;
+    }, [
+        value
+    ]);
+}
+
+
+export {$aa90ad8b2b1d015f$export$5aadd9c0606af5c2 as useColor};
+//# sourceMappingURL=useColor.module.js.map

package/dist/useColor.module.js.map

@@ -0,0 +1 @@
+{"mappings":";;;AAAA;;;;;;;;;;CAUC;;AAMM,SAAS,0CAAS,KAAwC;IAC/D,OAAO,CAAA,GAAA,cAAM,EAAE;QACb,IAAI,OAAO,UAAU,UACnB,IAAI;YACF,OAAO,CAAA,GAAA,wCAAS,EAAE;QACpB,EAAE,OAAO,KAAK;YACZ,OAAO;QACT;QAEF,OAAO;IACT,GAAG;QAAC;KAAM;AACZ","sources":["packages/@react-stately/color/src/useColor.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Color} from '@react-types/color';\nimport {parseColor} from './Color';\nimport {useMemo} from 'react';\n\nexport function useColor(value: string | Color | undefined | null) {\n  return useMemo(() => {\n    if (typeof value === 'string') {\n      try {\n        return parseColor(value);\n      } catch (err) {\n        return undefined;\n      }\n    }\n    return value;\n  }, [value]);\n}\n"],"names":[],"version":3,"file":"useColor.module.js.map"}

package/dist/useColorAreaState.main.js

@@ -0,0 +1,124 @@
+var $83fe1a57d631223b$exports = require("./Color.main.js");
+var $318Do$reactstatelyutils = require("@react-stately/utils");
+var $318Do$react = require("react");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "useColorAreaState", () => $af2d7ac9990cfee2$export$6df7f0e2cabc7eef);
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+const $af2d7ac9990cfee2$var$DEFAULT_COLOR = (0, $83fe1a57d631223b$exports.parseColor)("#ffffff");
+function $af2d7ac9990cfee2$export$6df7f0e2cabc7eef(props) {
+    let { value: value, defaultValue: defaultValue, xChannel: xChannel, yChannel: yChannel, onChange: onChange, onChangeEnd: onChangeEnd } = props;
+    if (!value && !defaultValue) defaultValue = $af2d7ac9990cfee2$var$DEFAULT_COLOR;
+    let [color, setColorState] = (0, $318Do$reactstatelyutils.useControlledState)(value && (0, $83fe1a57d631223b$exports.normalizeColor)(value), defaultValue && (0, $83fe1a57d631223b$exports.normalizeColor)(defaultValue), onChange);
+    let valueRef = (0, $318Do$react.useRef)(color);
+    let setColor = (color)=>{
+        valueRef.current = color;
+        setColorState(color);
+    };
+    let channels = (0, $318Do$react.useMemo)(()=>color.getColorSpaceAxes({
+            xChannel: xChannel,
+            yChannel: yChannel
+        }), [
+        color,
+        xChannel,
+        yChannel
+    ]);
+    let xChannelRange = color.getChannelRange(channels.xChannel);
+    let yChannelRange = color.getChannelRange(channels.yChannel);
+    let { minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX } = xChannelRange;
+    let { minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY } = yChannelRange;
+    let [isDragging, setDragging] = (0, $318Do$react.useState)(false);
+    let isDraggingRef = (0, $318Do$react.useRef)(false);
+    let xValue = color.getChannelValue(channels.xChannel);
+    let yValue = color.getChannelValue(channels.yChannel);
+    let setXValue = (v)=>{
+        if (v === xValue) return;
+        let newColor = color.withChannelValue(channels.xChannel, v);
+        setColor(newColor);
+    };
+    let setYValue = (v)=>{
+        if (v === yValue) return;
+        let newColor = color.withChannelValue(channels.yChannel, v);
+        setColor(newColor);
+    };
+    return {
+        channels: channels,
+        xChannelStep: stepX,
+        yChannelStep: stepY,
+        xChannelPageStep: pageSizeX,
+        yChannelPageStep: pageSizeY,
+        value: color,
+        setValue (value) {
+            setColor((0, $83fe1a57d631223b$exports.normalizeColor)(value));
+        },
+        xValue: xValue,
+        setXValue: setXValue,
+        yValue: yValue,
+        setYValue: setYValue,
+        setColorFromPoint (x, y) {
+            let newXValue = minValueX + (0, $318Do$reactstatelyutils.clamp)(x, 0, 1) * (maxValueX - minValueX);
+            let newYValue = minValueY + (1 - (0, $318Do$reactstatelyutils.clamp)(y, 0, 1)) * (maxValueY - minValueY);
+            let newColor;
+            if (newXValue !== xValue) {
+                // Round new value to multiple of step, clamp value between min and max
+                newXValue = (0, $318Do$reactstatelyutils.snapValueToStep)(newXValue, minValueX, maxValueX, stepX);
+                newColor = color.withChannelValue(channels.xChannel, newXValue);
+            }
+            if (newYValue !== yValue) {
+                // Round new value to multiple of step, clamp value between min and max
+                newYValue = (0, $318Do$reactstatelyutils.snapValueToStep)(newYValue, minValueY, maxValueY, stepY);
+                newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);
+            }
+            if (newColor) setColor(newColor);
+        },
+        getThumbPosition () {
+            let x = (xValue - minValueX) / (maxValueX - minValueX);
+            let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);
+            return {
+                x: x,
+                y: y
+            };
+        },
+        incrementX (stepSize) {
+            setXValue(xValue + stepSize > maxValueX ? maxValueX : (0, $318Do$reactstatelyutils.snapValueToStep)(xValue + stepSize, minValueX, maxValueX, stepX));
+        },
+        incrementY (stepSize) {
+            setYValue(yValue + stepSize > maxValueY ? maxValueY : (0, $318Do$reactstatelyutils.snapValueToStep)(yValue + stepSize, minValueY, maxValueY, stepY));
+        },
+        decrementX (stepSize) {
+            setXValue((0, $318Do$reactstatelyutils.snapValueToStep)(xValue - stepSize, minValueX, maxValueX, stepX));
+        },
+        decrementY (stepSize) {
+            setYValue((0, $318Do$reactstatelyutils.snapValueToStep)(yValue - stepSize, minValueY, maxValueY, stepY));
+        },
+        setDragging (isDragging) {
+            let wasDragging = isDraggingRef.current;
+            isDraggingRef.current = isDragging;
+            if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current);
+            setDragging(isDragging);
+        },
+        isDragging: isDragging,
+        getDisplayColor () {
+            return color.withChannelValue("alpha", 1);
+        }
+    };
+}
+
+
+//# sourceMappingURL=useColorAreaState.main.js.map

package/dist/useColorAreaState.main.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-stately/color/src/useColorAreaState.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {clamp, snapValueToStep, useControlledState} from '@react-stately/utils';\nimport {Color, ColorAreaProps, ColorChannel} from '@react-types/color';\nimport {normalizeColor, parseColor} from './Color';\nimport {useMemo, useRef, useState} from 'react';\n\nexport interface ColorAreaState {\n  /** The current color value displayed by the color area. */\n  readonly value: Color,\n  /** Sets the current color value. If a string is passed, it will be parsed to a Color. */\n  setValue(value: string | Color): void,\n\n  /** The current value of the horizontal axis channel displayed by the color area. */\n  xValue: number,\n  /** Sets the value for the horizontal axis channel displayed by the color area, and triggers `onChange`. */\n  setXValue(value: number): void,\n\n  /** The current value of the vertical axis channel displayed by the color area. */\n  yValue: number,\n  /** Sets the value for the vertical axis channel displayed by the color area, and triggers `onChange`. */\n  setYValue(value: number): void,\n\n  /** Sets the x and y channels of the current color value based on a percentage of the width and height of the color area, and triggers `onChange`. */\n  setColorFromPoint(x: number, y: number): void,\n  /** Returns the coordinates of the thumb relative to the upper left corner of the color area as a percentage. */\n  getThumbPosition(): {x: number, y: number},\n\n  /** Increments the value of the horizontal axis channel by the channel step or page amount. */\n  incrementX(stepSize?: number): void,\n  /** Decrements the value of the horizontal axis channel by the channel step or page amount. */\n  decrementX(stepSize?: number): void,\n\n  /** Increments the value of the vertical axis channel by the channel step or page amount. */\n  incrementY(stepSize?: number): void,\n  /** Decrements the value of the vertical axis channel by the channel step or page amount. */\n  decrementY(stepSize?: number): void,\n\n  /** Whether the color area is currently being dragged. */\n  readonly isDragging: boolean,\n  /** Sets whether the color area is being dragged. */\n  setDragging(value: boolean): void,\n\n  /** Returns the xChannel, yChannel and zChannel names based on the color value. */\n  channels: {xChannel: ColorChannel, yChannel: ColorChannel, zChannel: ColorChannel},\n  /** The step value of the xChannel, used when incrementing and decrementing. */\n  xChannelStep: number,\n  /** The step value of the yChannel, used when incrementing and decrementing. */\n  yChannelStep: number,\n  /** The page step value of the xChannel, used when incrementing and decrementing. */\n  xChannelPageStep: number,\n  /** The page step value of the yChannel, used when incrementing and decrementing. */\n  yChannelPageStep: number,\n\n  /** Returns the color that should be displayed in the color area thumb instead of `value`. */\n  getDisplayColor(): Color\n}\n\nconst DEFAULT_COLOR = parseColor('#ffffff');\n/**\n * Provides state management for a color area component.\n * Color area allows users to adjust two channels of an HSL, HSB or RGB color value against a two-dimensional gradient background.\n */\nexport function useColorAreaState(props: ColorAreaProps): ColorAreaState {\n  let {\n    value,\n    defaultValue,\n    xChannel,\n    yChannel,\n    onChange,\n    onChangeEnd\n  } = props;\n\n  if (!value && !defaultValue) {\n    defaultValue = DEFAULT_COLOR;\n  }\n\n  let [color, setColorState] = useControlledState(value && normalizeColor(value), defaultValue && normalizeColor(defaultValue), onChange);\n  let valueRef = useRef(color);\n  let setColor = (color: Color) => {\n    valueRef.current = color;\n    setColorState(color);\n  };\n\n  let channels = useMemo(() =>\n    color.getColorSpaceAxes({xChannel, yChannel}),\n    [color, xChannel, yChannel]\n  );\n\n  let xChannelRange = color.getChannelRange(channels.xChannel);\n  let yChannelRange = color.getChannelRange(channels.yChannel);\n  let {minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX} = xChannelRange;\n  let {minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY} = yChannelRange;\n\n  let [isDragging, setDragging] = useState(false);\n  let isDraggingRef = useRef(false);\n\n  let xValue = color.getChannelValue(channels.xChannel);\n  let yValue = color.getChannelValue(channels.yChannel);\n  let setXValue = (v: number) => {\n    if (v === xValue) {\n      return;\n    }\n    let newColor = color.withChannelValue(channels.xChannel, v);\n    setColor(newColor);\n  };\n  let setYValue = (v: number) => {\n    if (v === yValue) {\n      return;\n    }\n    let newColor = color.withChannelValue(channels.yChannel, v);\n    setColor(newColor);\n  };\n\n  return {\n    channels,\n    xChannelStep: stepX,\n    yChannelStep: stepY,\n    xChannelPageStep: pageSizeX,\n    yChannelPageStep: pageSizeY,\n    value: color,\n    setValue(value) {\n      setColor(normalizeColor(value));\n    },\n    xValue,\n    setXValue,\n    yValue,\n    setYValue,\n    setColorFromPoint(x: number, y: number) {\n      let newXValue = minValueX + clamp(x, 0, 1) * (maxValueX - minValueX);\n      let newYValue = minValueY + (1 - clamp(y, 0, 1)) * (maxValueY - minValueY);\n      let newColor:Color;\n      if (newXValue !== xValue) {\n        // Round new value to multiple of step, clamp value between min and max\n        newXValue = snapValueToStep(newXValue, minValueX, maxValueX, stepX);\n        newColor = color.withChannelValue(channels.xChannel, newXValue);\n      }\n      if (newYValue !== yValue) {\n        // Round new value to multiple of step, clamp value between min and max\n        newYValue = snapValueToStep(newYValue, minValueY, maxValueY, stepY);\n        newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);\n      }\n      if (newColor) {\n        setColor(newColor);\n      }\n    },\n    getThumbPosition() {\n      let x = (xValue - minValueX) / (maxValueX - minValueX);\n      let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);\n      return {x, y};\n    },\n    incrementX(stepSize) {\n      setXValue(xValue + stepSize > maxValueX ? maxValueX : snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX));\n    },\n    incrementY(stepSize) {\n      setYValue(yValue + stepSize > maxValueY ? maxValueY : snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY));\n    },\n    decrementX(stepSize) {\n      setXValue(snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX));\n    },\n    decrementY(stepSize) {\n      setYValue(snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY));\n    },\n    setDragging(isDragging) {\n      let wasDragging = isDraggingRef.current;\n      isDraggingRef.current = isDragging;\n\n      if (onChangeEnd && !isDragging && wasDragging) {\n        onChangeEnd(valueRef.current);\n      }\n\n      setDragging(isDragging);\n    },\n    isDragging,\n    getDisplayColor() {\n      return color.withChannelValue('alpha', 1);\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useColorAreaState.main.js.map"}

package/dist/useColorAreaState.mjs

@@ -0,0 +1,119 @@
+import {normalizeColor as $799cddbef784668f$export$4cde5df63f53f473, parseColor as $799cddbef784668f$export$6e865ea70d7724f} from "./Color.mjs";
+import {useControlledState as $5ShDH$useControlledState, clamp as $5ShDH$clamp, snapValueToStep as $5ShDH$snapValueToStep} from "@react-stately/utils";
+import {useRef as $5ShDH$useRef, useMemo as $5ShDH$useMemo, useState as $5ShDH$useState} from "react";
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+const $6e14a98a7f67141d$var$DEFAULT_COLOR = (0, $799cddbef784668f$export$6e865ea70d7724f)("#ffffff");
+function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
+    let { value: value, defaultValue: defaultValue, xChannel: xChannel, yChannel: yChannel, onChange: onChange, onChangeEnd: onChangeEnd } = props;
+    if (!value && !defaultValue) defaultValue = $6e14a98a7f67141d$var$DEFAULT_COLOR;
+    let [color, setColorState] = (0, $5ShDH$useControlledState)(value && (0, $799cddbef784668f$export$4cde5df63f53f473)(value), defaultValue && (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    let valueRef = (0, $5ShDH$useRef)(color);
+    let setColor = (color)=>{
+        valueRef.current = color;
+        setColorState(color);
+    };
+    let channels = (0, $5ShDH$useMemo)(()=>color.getColorSpaceAxes({
+            xChannel: xChannel,
+            yChannel: yChannel
+        }), [
+        color,
+        xChannel,
+        yChannel
+    ]);
+    let xChannelRange = color.getChannelRange(channels.xChannel);
+    let yChannelRange = color.getChannelRange(channels.yChannel);
+    let { minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX } = xChannelRange;
+    let { minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY } = yChannelRange;
+    let [isDragging, setDragging] = (0, $5ShDH$useState)(false);
+    let isDraggingRef = (0, $5ShDH$useRef)(false);
+    let xValue = color.getChannelValue(channels.xChannel);
+    let yValue = color.getChannelValue(channels.yChannel);
+    let setXValue = (v)=>{
+        if (v === xValue) return;
+        let newColor = color.withChannelValue(channels.xChannel, v);
+        setColor(newColor);
+    };
+    let setYValue = (v)=>{
+        if (v === yValue) return;
+        let newColor = color.withChannelValue(channels.yChannel, v);
+        setColor(newColor);
+    };
+    return {
+        channels: channels,
+        xChannelStep: stepX,
+        yChannelStep: stepY,
+        xChannelPageStep: pageSizeX,
+        yChannelPageStep: pageSizeY,
+        value: color,
+        setValue (value) {
+            setColor((0, $799cddbef784668f$export$4cde5df63f53f473)(value));
+        },
+        xValue: xValue,
+        setXValue: setXValue,
+        yValue: yValue,
+        setYValue: setYValue,
+        setColorFromPoint (x, y) {
+            let newXValue = minValueX + (0, $5ShDH$clamp)(x, 0, 1) * (maxValueX - minValueX);
+            let newYValue = minValueY + (1 - (0, $5ShDH$clamp)(y, 0, 1)) * (maxValueY - minValueY);
+            let newColor;
+            if (newXValue !== xValue) {
+                // Round new value to multiple of step, clamp value between min and max
+                newXValue = (0, $5ShDH$snapValueToStep)(newXValue, minValueX, maxValueX, stepX);
+                newColor = color.withChannelValue(channels.xChannel, newXValue);
+            }
+            if (newYValue !== yValue) {
+                // Round new value to multiple of step, clamp value between min and max
+                newYValue = (0, $5ShDH$snapValueToStep)(newYValue, minValueY, maxValueY, stepY);
+                newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);
+            }
+            if (newColor) setColor(newColor);
+        },
+        getThumbPosition () {
+            let x = (xValue - minValueX) / (maxValueX - minValueX);
+            let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);
+            return {
+                x: x,
+                y: y
+            };
+        },
+        incrementX (stepSize) {
+            setXValue(xValue + stepSize > maxValueX ? maxValueX : (0, $5ShDH$snapValueToStep)(xValue + stepSize, minValueX, maxValueX, stepX));
+        },
+        incrementY (stepSize) {
+            setYValue(yValue + stepSize > maxValueY ? maxValueY : (0, $5ShDH$snapValueToStep)(yValue + stepSize, minValueY, maxValueY, stepY));
+        },
+        decrementX (stepSize) {
+            setXValue((0, $5ShDH$snapValueToStep)(xValue - stepSize, minValueX, maxValueX, stepX));
+        },
+        decrementY (stepSize) {
+            setYValue((0, $5ShDH$snapValueToStep)(yValue - stepSize, minValueY, maxValueY, stepY));
+        },
+        setDragging (isDragging) {
+            let wasDragging = isDraggingRef.current;
+            isDraggingRef.current = isDragging;
+            if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current);
+            setDragging(isDragging);
+        },
+        isDragging: isDragging,
+        getDisplayColor () {
+            return color.withChannelValue("alpha", 1);
+        }
+    };
+}
+
+
+export {$6e14a98a7f67141d$export$6df7f0e2cabc7eef as useColorAreaState};
+//# sourceMappingURL=useColorAreaState.mjs.map

package/dist/useColorAreaState.module.js

@@ -0,0 +1,119 @@
+import {normalizeColor as $799cddbef784668f$export$4cde5df63f53f473, parseColor as $799cddbef784668f$export$6e865ea70d7724f} from "./Color.module.js";
+import {useControlledState as $5ShDH$useControlledState, clamp as $5ShDH$clamp, snapValueToStep as $5ShDH$snapValueToStep} from "@react-stately/utils";
+import {useRef as $5ShDH$useRef, useMemo as $5ShDH$useMemo, useState as $5ShDH$useState} from "react";
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+const $6e14a98a7f67141d$var$DEFAULT_COLOR = (0, $799cddbef784668f$export$6e865ea70d7724f)("#ffffff");
+function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
+    let { value: value, defaultValue: defaultValue, xChannel: xChannel, yChannel: yChannel, onChange: onChange, onChangeEnd: onChangeEnd } = props;
+    if (!value && !defaultValue) defaultValue = $6e14a98a7f67141d$var$DEFAULT_COLOR;
+    let [color, setColorState] = (0, $5ShDH$useControlledState)(value && (0, $799cddbef784668f$export$4cde5df63f53f473)(value), defaultValue && (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    let valueRef = (0, $5ShDH$useRef)(color);
+    let setColor = (color)=>{
+        valueRef.current = color;
+        setColorState(color);
+    };
+    let channels = (0, $5ShDH$useMemo)(()=>color.getColorSpaceAxes({
+            xChannel: xChannel,
+            yChannel: yChannel
+        }), [
+        color,
+        xChannel,
+        yChannel
+    ]);
+    let xChannelRange = color.getChannelRange(channels.xChannel);
+    let yChannelRange = color.getChannelRange(channels.yChannel);
+    let { minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX } = xChannelRange;
+    let { minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY } = yChannelRange;
+    let [isDragging, setDragging] = (0, $5ShDH$useState)(false);
+    let isDraggingRef = (0, $5ShDH$useRef)(false);
+    let xValue = color.getChannelValue(channels.xChannel);
+    let yValue = color.getChannelValue(channels.yChannel);
+    let setXValue = (v)=>{
+        if (v === xValue) return;
+        let newColor = color.withChannelValue(channels.xChannel, v);
+        setColor(newColor);
+    };
+    let setYValue = (v)=>{
+        if (v === yValue) return;
+        let newColor = color.withChannelValue(channels.yChannel, v);
+        setColor(newColor);
+    };
+    return {
+        channels: channels,
+        xChannelStep: stepX,
+        yChannelStep: stepY,
+        xChannelPageStep: pageSizeX,
+        yChannelPageStep: pageSizeY,
+        value: color,
+        setValue (value) {
+            setColor((0, $799cddbef784668f$export$4cde5df63f53f473)(value));
+        },
+        xValue: xValue,
+        setXValue: setXValue,
+        yValue: yValue,
+        setYValue: setYValue,
+        setColorFromPoint (x, y) {
+            let newXValue = minValueX + (0, $5ShDH$clamp)(x, 0, 1) * (maxValueX - minValueX);
+            let newYValue = minValueY + (1 - (0, $5ShDH$clamp)(y, 0, 1)) * (maxValueY - minValueY);
+            let newColor;
+            if (newXValue !== xValue) {
+                // Round new value to multiple of step, clamp value between min and max
+                newXValue = (0, $5ShDH$snapValueToStep)(newXValue, minValueX, maxValueX, stepX);
+                newColor = color.withChannelValue(channels.xChannel, newXValue);
+            }
+            if (newYValue !== yValue) {
+                // Round new value to multiple of step, clamp value between min and max
+                newYValue = (0, $5ShDH$snapValueToStep)(newYValue, minValueY, maxValueY, stepY);
+                newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);
+            }
+            if (newColor) setColor(newColor);
+        },
+        getThumbPosition () {
+            let x = (xValue - minValueX) / (maxValueX - minValueX);
+            let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);
+            return {
+                x: x,
+                y: y
+            };
+        },
+        incrementX (stepSize) {
+            setXValue(xValue + stepSize > maxValueX ? maxValueX : (0, $5ShDH$snapValueToStep)(xValue + stepSize, minValueX, maxValueX, stepX));
+        },
+        incrementY (stepSize) {
+            setYValue(yValue + stepSize > maxValueY ? maxValueY : (0, $5ShDH$snapValueToStep)(yValue + stepSize, minValueY, maxValueY, stepY));
+        },
+        decrementX (stepSize) {
+            setXValue((0, $5ShDH$snapValueToStep)(xValue - stepSize, minValueX, maxValueX, stepX));
+        },
+        decrementY (stepSize) {
+            setYValue((0, $5ShDH$snapValueToStep)(yValue - stepSize, minValueY, maxValueY, stepY));
+        },
+        setDragging (isDragging) {
+            let wasDragging = isDraggingRef.current;
+            isDraggingRef.current = isDragging;
+            if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current);
+            setDragging(isDragging);
+        },
+        isDragging: isDragging,
+        getDisplayColor () {
+            return color.withChannelValue("alpha", 1);
+        }
+    };
+}
+
+
+export {$6e14a98a7f67141d$export$6df7f0e2cabc7eef as useColorAreaState};
+//# sourceMappingURL=useColorAreaState.module.js.map

package/dist/useColorAreaState.module.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-stately/color/src/useColorAreaState.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {clamp, snapValueToStep, useControlledState} from '@react-stately/utils';\nimport {Color, ColorAreaProps, ColorChannel} from '@react-types/color';\nimport {normalizeColor, parseColor} from './Color';\nimport {useMemo, useRef, useState} from 'react';\n\nexport interface ColorAreaState {\n  /** The current color value displayed by the color area. */\n  readonly value: Color,\n  /** Sets the current color value. If a string is passed, it will be parsed to a Color. */\n  setValue(value: string | Color): void,\n\n  /** The current value of the horizontal axis channel displayed by the color area. */\n  xValue: number,\n  /** Sets the value for the horizontal axis channel displayed by the color area, and triggers `onChange`. */\n  setXValue(value: number): void,\n\n  /** The current value of the vertical axis channel displayed by the color area. */\n  yValue: number,\n  /** Sets the value for the vertical axis channel displayed by the color area, and triggers `onChange`. */\n  setYValue(value: number): void,\n\n  /** Sets the x and y channels of the current color value based on a percentage of the width and height of the color area, and triggers `onChange`. */\n  setColorFromPoint(x: number, y: number): void,\n  /** Returns the coordinates of the thumb relative to the upper left corner of the color area as a percentage. */\n  getThumbPosition(): {x: number, y: number},\n\n  /** Increments the value of the horizontal axis channel by the channel step or page amount. */\n  incrementX(stepSize?: number): void,\n  /** Decrements the value of the horizontal axis channel by the channel step or page amount. */\n  decrementX(stepSize?: number): void,\n\n  /** Increments the value of the vertical axis channel by the channel step or page amount. */\n  incrementY(stepSize?: number): void,\n  /** Decrements the value of the vertical axis channel by the channel step or page amount. */\n  decrementY(stepSize?: number): void,\n\n  /** Whether the color area is currently being dragged. */\n  readonly isDragging: boolean,\n  /** Sets whether the color area is being dragged. */\n  setDragging(value: boolean): void,\n\n  /** Returns the xChannel, yChannel and zChannel names based on the color value. */\n  channels: {xChannel: ColorChannel, yChannel: ColorChannel, zChannel: ColorChannel},\n  /** The step value of the xChannel, used when incrementing and decrementing. */\n  xChannelStep: number,\n  /** The step value of the yChannel, used when incrementing and decrementing. */\n  yChannelStep: number,\n  /** The page step value of the xChannel, used when incrementing and decrementing. */\n  xChannelPageStep: number,\n  /** The page step value of the yChannel, used when incrementing and decrementing. */\n  yChannelPageStep: number,\n\n  /** Returns the color that should be displayed in the color area thumb instead of `value`. */\n  getDisplayColor(): Color\n}\n\nconst DEFAULT_COLOR = parseColor('#ffffff');\n/**\n * Provides state management for a color area component.\n * Color area allows users to adjust two channels of an HSL, HSB or RGB color value against a two-dimensional gradient background.\n */\nexport function useColorAreaState(props: ColorAreaProps): ColorAreaState {\n  let {\n    value,\n    defaultValue,\n    xChannel,\n    yChannel,\n    onChange,\n    onChangeEnd\n  } = props;\n\n  if (!value && !defaultValue) {\n    defaultValue = DEFAULT_COLOR;\n  }\n\n  let [color, setColorState] = useControlledState(value && normalizeColor(value), defaultValue && normalizeColor(defaultValue), onChange);\n  let valueRef = useRef(color);\n  let setColor = (color: Color) => {\n    valueRef.current = color;\n    setColorState(color);\n  };\n\n  let channels = useMemo(() =>\n    color.getColorSpaceAxes({xChannel, yChannel}),\n    [color, xChannel, yChannel]\n  );\n\n  let xChannelRange = color.getChannelRange(channels.xChannel);\n  let yChannelRange = color.getChannelRange(channels.yChannel);\n  let {minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX} = xChannelRange;\n  let {minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY} = yChannelRange;\n\n  let [isDragging, setDragging] = useState(false);\n  let isDraggingRef = useRef(false);\n\n  let xValue = color.getChannelValue(channels.xChannel);\n  let yValue = color.getChannelValue(channels.yChannel);\n  let setXValue = (v: number) => {\n    if (v === xValue) {\n      return;\n    }\n    let newColor = color.withChannelValue(channels.xChannel, v);\n    setColor(newColor);\n  };\n  let setYValue = (v: number) => {\n    if (v === yValue) {\n      return;\n    }\n    let newColor = color.withChannelValue(channels.yChannel, v);\n    setColor(newColor);\n  };\n\n  return {\n    channels,\n    xChannelStep: stepX,\n    yChannelStep: stepY,\n    xChannelPageStep: pageSizeX,\n    yChannelPageStep: pageSizeY,\n    value: color,\n    setValue(value) {\n      setColor(normalizeColor(value));\n    },\n    xValue,\n    setXValue,\n    yValue,\n    setYValue,\n    setColorFromPoint(x: number, y: number) {\n      let newXValue = minValueX + clamp(x, 0, 1) * (maxValueX - minValueX);\n      let newYValue = minValueY + (1 - clamp(y, 0, 1)) * (maxValueY - minValueY);\n      let newColor:Color;\n      if (newXValue !== xValue) {\n        // Round new value to multiple of step, clamp value between min and max\n        newXValue = snapValueToStep(newXValue, minValueX, maxValueX, stepX);\n        newColor = color.withChannelValue(channels.xChannel, newXValue);\n      }\n      if (newYValue !== yValue) {\n        // Round new value to multiple of step, clamp value between min and max\n        newYValue = snapValueToStep(newYValue, minValueY, maxValueY, stepY);\n        newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);\n      }\n      if (newColor) {\n        setColor(newColor);\n      }\n    },\n    getThumbPosition() {\n      let x = (xValue - minValueX) / (maxValueX - minValueX);\n      let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);\n      return {x, y};\n    },\n    incrementX(stepSize) {\n      setXValue(xValue + stepSize > maxValueX ? maxValueX : snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX));\n    },\n    incrementY(stepSize) {\n      setYValue(yValue + stepSize > maxValueY ? maxValueY : snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY));\n    },\n    decrementX(stepSize) {\n      setXValue(snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX));\n    },\n    decrementY(stepSize) {\n      setYValue(snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY));\n    },\n    setDragging(isDragging) {\n      let wasDragging = isDraggingRef.current;\n      isDraggingRef.current = isDragging;\n\n      if (onChangeEnd && !isDragging && wasDragging) {\n        onChangeEnd(valueRef.current);\n      }\n\n      setDragging(isDragging);\n    },\n    isDragging,\n    getDisplayColor() {\n      return color.withChannelValue('alpha', 1);\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useColorAreaState.module.js.map"}