reanimated-color-picker 2.4.1 → 2.4.2

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2022 Ahmed Alabsi
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2022 Ahmed Alabsi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. 

package/README.md

@@ -1,79 +1,79 @@
-:red_circle: :green_circle: :large_blue_circle:
-
-# Reanimated Color Picker
-
-[![npm](https://img.shields.io/npm/v/reanimated-color-picker?style=for-the-badge)](https://www.npmjs.com/package/reanimated-color-picker)
-[![GitHub](https://img.shields.io/github/license/alabsi91/reanimated-color-picker?style=for-the-badge)](https://github.com/alabsi91/reanimated-color-picker/blob/main/LICENSE)
-[![GitHub issues](https://img.shields.io/github/issues/alabsi91/reanimated-color-picker?style=for-the-badge)](https://github.com/alabsi91/reanimated-color-picker/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc)
-![Platform](https://img.shields.io/badge/Platform-IOS%20%7C%20Android%20%7C%20Expo%20%7C%20Web-informational?style=for-the-badge)
-![Arch](https://img.shields.io/badge/React%20Native-Paper%20%7C%20New%20Architecture-informational?style=for-the-badge)
-
-### - A Pure JavaScript Color Picker for React Native.
-
-### - Highly customizable.
-
-### - Supports IOS, Android, Expo, and Web platforms.
-
-### - Supports right-to-left (RTL) layouts.
-
-![Example_1](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_1.png)
-![Example_7](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_7.png)
-
-![Example_2](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_2.png)
-![Example_3](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_3.png)
-
-![Example_4](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_4.png)
-![Example_5](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_5.png)
-
-![Example_8](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_8.png)
-![Example_9](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_9.png)
-
-![Example_10](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_10.png)
-![Example_11](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_11.png)
-
-![Example_6](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_6.png)
-![Example_12](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_12.png)
-
-# :small_blue_diamond:Prerequisites
-
-- Follow the installation instructions by using the links provided below.
-
-- [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/installation) version `2.0.0` or higher.
-
-- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation) version `2.0.0` or higher.
-
-- For `Expo` managed workflow version `44` or higher is required.
-
-# :small_blue_diamond:Installation
-
-> **Note**
-> First we need to install [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/installation)(>=2.0.0) and [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation)(>=2.0.0),
-
-- Open a Terminal in the project root and run:
-
-```
-npm i reanimated-color-picker
-```
-
-# :small_blue_diamond:Fabric support
-
-- `react-native-gesture-handler` supports the new architecture since version `2.3.0`.
-- `react-native-reanimated` supports the new architecture since version `3.0.0`.
-
-# :small_blue_diamond:Usage
-
-### [📖 View the documentation site 📖](https://alabsi91.github.io/reanimated-color-picker/)
-
-> Please check out my other library, [React Native Material You Colors](https://github.com/alabsi91/react-native-material-you-colors).
-
-# :small_blue_diamond:License
-
-- Reanimated Color Picker library is licensed under [**The MIT License.**](https://github.com/alabsi91/reanimated-color-picker/blob/main/LICENSE)
-
-# :small_blue_diamond: Sponsoring
-
-<a href="https://github.com/sponsors/alabsi91">
-  <img align="right" width="160" alt="This library helped you? Consider sponsoring!" src=".github/funding-octocat.svg">
-</a>
-
-If you're integrating Reanimated Color Picker in a production app, consider [funding this project](https://github.com/sponsors/alabsi91) and <a href="mailto:alabsi91@gmail.com">contact me</a> .
+:red_circle: :green_circle: :large_blue_circle:
+
+# Reanimated Color Picker
+
+[![npm](https://img.shields.io/npm/v/reanimated-color-picker?style=for-the-badge)](https://www.npmjs.com/package/reanimated-color-picker)
+[![GitHub](https://img.shields.io/github/license/alabsi91/reanimated-color-picker?style=for-the-badge)](https://github.com/alabsi91/reanimated-color-picker/blob/main/LICENSE)
+[![GitHub issues](https://img.shields.io/github/issues/alabsi91/reanimated-color-picker?style=for-the-badge)](https://github.com/alabsi91/reanimated-color-picker/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc)
+![Platform](https://img.shields.io/badge/Platform-IOS%20%7C%20Android%20%7C%20Expo%20%7C%20Web-informational?style=for-the-badge)
+![Arch](https://img.shields.io/badge/React%20Native-Paper%20%7C%20New%20Architecture-informational?style=for-the-badge)
+
+### - A Pure JavaScript Color Picker for React Native.
+
+### - Highly customizable.
+
+### - Supports IOS, Android, Expo, and Web platforms.
+
+### - Supports right-to-left (RTL) layouts.
+
+![Example_1](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_1.png)
+![Example_7](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_7.png)
+
+![Example_2](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_2.png)
+![Example_3](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_3.png)
+
+![Example_4](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_4.png)
+![Example_5](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_5.png)
+
+![Example_8](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_8.png)
+![Example_9](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_9.png)
+
+![Example_10](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_10.png)
+![Example_11](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_11.png)
+
+![Example_6](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_6.png)
+![Example_12](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_12.png)
+
+# :small_blue_diamond:Prerequisites
+
+- Follow the installation instructions by using the links provided below.
+
+- [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/installation) version `2.0.0` or higher.
+
+- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#installation) version `2.0.0` or higher.
+
+- For `Expo` managed workflow version `44` or higher is required.
+
+# :small_blue_diamond:Installation
+
+> **Note**
+> First we need to install [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/installation)(>=2.0.0) and [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation)(>=2.0.0),
+
+- Open a Terminal in the project root and run:
+
+```
+npm i reanimated-color-picker
+```
+
+# :small_blue_diamond:Fabric support
+
+- `react-native-gesture-handler` supports the new architecture since version `2.3.0`.
+- `react-native-reanimated` supports the new architecture since version `3.0.0`.
+
+# :small_blue_diamond:Usage
+
+### [📖 View the documentation site 📖](https://alabsi91.github.io/reanimated-color-picker/)
+
+> Please check out my other library, [React Native Material You Colors](https://github.com/alabsi91/react-native-material-you-colors).
+
+# :small_blue_diamond:License
+
+- Reanimated Color Picker library is licensed under [**The MIT License.**](https://github.com/alabsi91/reanimated-color-picker/blob/main/LICENSE)
+
+# :small_blue_diamond: Sponsoring
+
+<a href="https://github.com/sponsors/alabsi91">
+  <img align="right" width="160" alt="This library helped you? Consider sponsoring!" src=".github/funding-octocat.svg">
+</a>
+
+If you're integrating Reanimated Color Picker in a production app, consider [funding this project](https://github.com/sponsors/alabsi91) and <a href="mailto:alabsi91@gmail.com">contact me</a> .

package/lib/commonjs/AppContext.js.map

@@ -1,22 +1 @@
-{
-  "version": 3,
-  "file": "AppContext.js",
-  "names": [
-    "_react",
-    "require",
-    "pickerContext",
-    "createContext",
-    "PickerContextProvider",
-    "exports",
-    "Provider",
-    "usePickerContext",
-    "ctx",
-    "useContext",
-    "Error"
-  ],
-  "sources": ["../../src/AppContext.ts"],
-  "sourcesContent": [
-    "import { createContext, useContext } from 'react';\r\n\r\nimport type { ColorPickerContext } from '@types';\r\n\r\nconst pickerContext = createContext<ColorPickerContext>(null!);\r\nexport const PickerContextProvider = pickerContext.Provider;\r\n\r\nexport default function usePickerContext() {\r\n  const ctx = useContext(pickerContext);\r\n  if (!ctx) {\r\n    throw new Error('[reanimated-color-picker]: App context is not ready yet!');\r\n  }\r\n  return ctx;\r\n}\r\n"
-  ],
-  "mappings": ";;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAIA,MAAMC,aAAa,gBAAG,IAAAC,oBAAa,EAAqB,IAAK,CAAC;AACvD,MAAMC,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAGF,aAAa,CAACI,QAAQ;AAE5C,SAASC,gBAAgBA,CAAA,EAAG;EACzC,MAAMC,GAAG,GAAG,IAAAC,iBAAU,EAACP,aAAa,CAAC;EACrC,IAAI,CAACM,GAAG,EAAE;IACR,MAAM,IAAIE,KAAK,CAAC,0DAA0D,CAAC;EAC7E;EACA,OAAOF,GAAG;AACZ"
-}
+{"version":3,"file":"AppContext.js","names":["_react","require","pickerContext","createContext","PickerContextProvider","exports","Provider","usePickerContext","ctx","useContext","Error"],"sources":["../src/AppContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport type { ColorPickerContext } from './types';\n\nconst pickerContext = createContext<ColorPickerContext>(null!);\nexport const PickerContextProvider = pickerContext.Provider;\n\nexport default function usePickerContext() {\n  const ctx = useContext(pickerContext);\n  if (!ctx) {\n    throw new Error('[reanimated-color-picker]: App context is not ready yet!');\n  }\n  return ctx;\n}\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAIA,MAAMC,aAAa,gBAAG,IAAAC,oBAAa,EAAqB,IAAK,CAAC;AACvD,MAAMC,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAGF,aAAa,CAACI,QAAQ;AAE5C,SAASC,gBAAgBA,CAAA,EAAG;EACzC,MAAMC,GAAG,GAAG,IAAAC,iBAAU,EAACP,aAAa,CAAC;EACrC,IAAI,CAACM,GAAG,EAAE;IACR,MAAM,IAAIE,KAAK,CAAC,0DAA0D,CAAC;EAC7E;EACA,OAAOF,GAAG;AACZ"}

package/lib/commonjs/ColorPicker.js

@@ -8,7 +8,7 @@ var _react = _interopRequireWildcard(require('react'));
 var _reactNative = require('react-native');
 var _reactNativeGestureHandler = require('react-native-gesture-handler');
 var _reactNativeReanimated = require('react-native-reanimated');
-var _colorKit = _interopRequireDefault(require('./colorKit'));
+var _index = _interopRequireDefault(require('./colorKit/index'));
 var _AppContext = require('./AppContext');
 var _utils = require('./utils');
 function _interopRequireDefault(obj) {
@@ -47,145 +47,148 @@ if (_utils.isWeb) {
     // ignore
   }
 }
-const ColorPicker = /*#__PURE__*/ (0, _react.forwardRef)((_ref, ref) => {
-  let {
-    adaptSpectrum = false,
-    sliderThickness = 25,
-    thumbAnimationDuration = 200,
-    thumbSize = 35,
-    thumbShape = 'ring',
-    boundedThumb = false,
-    thumbColor,
-    renderThumb,
-    thumbStyle,
-    thumbInnerStyle,
-    value = '#fff',
-    onChange,
-    onComplete,
-    style = {},
-    children = /*#__PURE__*/ _react.default.createElement(_reactNative.Text, null, 'NO CHILDREN'),
-  } = _ref;
-  const initialColor = (0, _react.useRef)(_colorKit.default.HSV(value).object()).current;
-  // color's channels values.
-  const hueValue = (0, _reactNativeReanimated.useSharedValue)(initialColor.h);
-  const saturationValue = (0, _reactNativeReanimated.useSharedValue)(initialColor.s);
-  const brightnessValue = (0, _reactNativeReanimated.useSharedValue)(initialColor.v);
-  const alphaValue = (0, _reactNativeReanimated.useSharedValue)(initialColor.a);
-  const returnedResults = color => {
-    color = color ?? {
-      h: hueValue.value,
-      s: saturationValue.value,
-      v: brightnessValue.value,
-      a: alphaValue.value,
+const ColorPicker = /*#__PURE__*/ (0, _react.forwardRef)(
+  (
+    {
+      adaptSpectrum = false,
+      sliderThickness = 25,
+      thumbAnimationDuration = 200,
+      thumbSize = 35,
+      thumbShape = 'ring',
+      boundedThumb = false,
+      thumbColor,
+      renderThumb,
+      thumbStyle,
+      thumbInnerStyle,
+      value = '#fff',
+      onChange,
+      onComplete,
+      style = {},
+      children = /*#__PURE__*/ _react.default.createElement(_reactNative.Text, null, 'NO CHILDREN'),
+    },
+    ref
+  ) => {
+    const initialColor = (0, _react.useRef)(_index.default.HSV(value).object()).current;
+    // color's channels values.
+    const hueValue = (0, _reactNativeReanimated.useSharedValue)(initialColor.h);
+    const saturationValue = (0, _reactNativeReanimated.useSharedValue)(initialColor.s);
+    const brightnessValue = (0, _reactNativeReanimated.useSharedValue)(initialColor.v);
+    const alphaValue = (0, _reactNativeReanimated.useSharedValue)(initialColor.a);
+    const returnedResults = color => {
+      color = color ?? {
+        h: hueValue.value,
+        s: saturationValue.value,
+        v: brightnessValue.value,
+        a: alphaValue.value,
+      };
+      return {
+        hex: _index.default.HEX(color),
+        rgb: _index.default.RGB(color).string(false),
+        rgba: _index.default.RGB(color).string(true),
+        hsl: _index.default.HSL(color).string(false),
+        hsla: _index.default.HSL(color).string(true),
+        hsv: _index.default.HSV(color).string(false),
+        hsva: _index.default.HSV(color).string(true),
+        hwb: _index.default.HWB(color).string(false),
+        hwba: _index.default.HWB(color).string(true),
+      };
+    };
+    const onGestureEnd = color => {
+      onComplete === null || onComplete === void 0 || onComplete(returnedResults(color));
     };
-    return {
-      hex: _colorKit.default.HEX(color),
-      rgb: _colorKit.default.RGB(color).string(false),
-      rgba: _colorKit.default.RGB(color).string(true),
-      hsl: _colorKit.default.HSL(color).string(false),
-      hsla: _colorKit.default.HSL(color).string(true),
-      hsv: _colorKit.default.HSV(color).string(false),
-      hsva: _colorKit.default.HSV(color).string(true),
-      hwb: _colorKit.default.HWB(color).string(false),
-      hwba: _colorKit.default.HWB(color).string(true),
+    const onGestureChange = color => {
+      onChange === null || onChange === void 0 || onChange(returnedResults(color));
     };
-  };
-  const onGestureEnd = color => {
-    onComplete === null || onComplete === void 0 || onComplete(returnedResults(color));
-  };
-  const onGestureChange = color => {
-    onChange === null || onChange === void 0 || onChange(returnedResults(color));
-  };
-  const setColor = function (color) {
-    let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : thumbAnimationDuration;
-    const { h, s, v, a } = _colorKit.default.HSV(color).object();
-    hueValue.value = (0, _reactNativeReanimated.withTiming)(h, {
-      duration,
-    });
-    saturationValue.value = (0, _reactNativeReanimated.withTiming)(s, {
-      duration,
-    });
-    brightnessValue.value = (0, _reactNativeReanimated.withTiming)(v, {
-      duration,
-    });
-    alphaValue.value = (0, _reactNativeReanimated.withTiming)(a, {
-      duration,
-    });
-  };
-  (0, _react.useEffect)(() => {
-    // Ignore value changes if the current color already matches the new color from the value props.
-    const newColorFormat = _colorKit.default.getFormat(value);
-    const currentColors = returnedResults();
+    const setColor = (color, duration = thumbAnimationDuration) => {
+      const { h, s, v, a } = _index.default.HSV(color).object();
+      hueValue.value = (0, _reactNativeReanimated.withTiming)(h, {
+        duration,
+      });
+      saturationValue.value = (0, _reactNativeReanimated.withTiming)(s, {
+        duration,
+      });
+      brightnessValue.value = (0, _reactNativeReanimated.withTiming)(v, {
+        duration,
+      });
+      alphaValue.value = (0, _reactNativeReanimated.withTiming)(a, {
+        duration,
+      });
+    };
+    (0, _react.useEffect)(() => {
+      // Ignore value changes if the current color already matches the new color from the value props.
+      const newColorFormat = _index.default.getFormat(value);
+      const currentColors = returnedResults();
 
-    // null or named color E.g "red"
-    if (!newColorFormat || newColorFormat === 'named') {
-      setColor(value);
-      return;
-    }
+      // null or named color E.g "red"
+      if (!newColorFormat || newColorFormat === 'named') {
+        setColor(value);
+        return;
+      }
 
-    // hex color
-    if (newColorFormat === 'hex3' || newColorFormat === 'hex4' || newColorFormat === 'hex6' || newColorFormat === 'hex8') {
-      if (value !== currentColors.hex) setColor(value);
-      return;
-    }
+      // hex color
+      if (newColorFormat === 'hex3' || newColorFormat === 'hex4' || newColorFormat === 'hex6' || newColorFormat === 'hex8') {
+        if (value !== currentColors.hex) setColor(value);
+        return;
+      }
 
-    // hsl | hsla | rgb | rgba | hsva | hsv | hwba | hwb
-    if (newColorFormat in currentColors) {
-      if (value !== currentColors[newColorFormat]) setColor(value);
-      return;
-    }
-    setColor(value);
-  }, [value]);
+      // hsl | hsla | rgb | rgba | hsva | hsv | hwba | hwb
+      if (newColorFormat in currentColors) {
+        if (value !== currentColors[newColorFormat]) setColor(value);
+        return;
+      }
+      setColor(value);
+    }, [value]);
 
-  // Addressing a sporadic problem where the shared value for color channels fails to update upon component mounting.
-  // This issue appears to manifest randomly and might be correlated with the Reanimated library.
-  (0, _react.useEffect)(() => {
-    hueValue.value += 1;
-    saturationValue.value += 1;
-    brightnessValue.value += 1;
-    setColor(value, 100);
-  }, []);
-  (0, _react.useImperativeHandle)(ref, () => ({
-    setColor,
-  }));
-  const ctxValue = {
-    hueValue,
-    saturationValue,
-    brightnessValue,
-    alphaValue,
-    adaptSpectrum,
-    sliderThickness,
-    thumbSize,
-    thumbShape,
-    boundedThumb,
-    thumbColor,
-    renderThumb,
-    thumbStyle,
-    thumbInnerStyle,
-    value,
-    setColor,
-    returnedResults,
-    onGestureEnd,
-    onGestureChange,
-  };
-  return /*#__PURE__*/ _react.default.createElement(
-    _reactNativeGestureHandler.GestureHandlerRootView,
-    {
-      style: [
-        {
-          direction: _utils.isWeb ? 'ltr' : undefined,
-        },
-        style,
-      ],
-    },
-    /*#__PURE__*/ _react.default.createElement(
-      _AppContext.PickerContextProvider,
+    // Addressing a sporadic problem where the shared value for color channels fails to update upon component mounting.
+    // This issue appears to manifest randomly and might be correlated with the Reanimated library.
+    (0, _react.useEffect)(() => {
+      hueValue.value += 1;
+      saturationValue.value += 1;
+      brightnessValue.value += 1;
+      setColor(value, 100);
+    }, []);
+    (0, _react.useImperativeHandle)(ref, () => ({
+      setColor,
+    }));
+    const ctxValue = {
+      hueValue,
+      saturationValue,
+      brightnessValue,
+      alphaValue,
+      adaptSpectrum,
+      sliderThickness,
+      thumbSize,
+      thumbShape,
+      boundedThumb,
+      thumbColor,
+      renderThumb,
+      thumbStyle,
+      thumbInnerStyle,
+      value,
+      setColor,
+      returnedResults,
+      onGestureEnd,
+      onGestureChange,
+    };
+    return /*#__PURE__*/ _react.default.createElement(
+      _reactNativeGestureHandler.GestureHandlerRootView,
       {
-        value: ctxValue,
+        style: [
+          {
+            direction: _utils.isWeb ? 'ltr' : undefined,
+          },
+          style,
+        ],
       },
-      children
-    )
-  );
-});
+      /*#__PURE__*/ _react.default.createElement(
+        _AppContext.PickerContextProvider,
+        {
+          value: ctxValue,
+        },
+        children
+      )
+    );
+  }
+);
 var _default = (exports.default = ColorPicker);
 //# sourceMappingURL=ColorPicker.js.map