@gympass/yoga 7.87.1 → 7.88.1

package/cjs/Checkbox/native/Checkbox.js

@@ -1 +1,304 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _propTypes=require("prop-types");var _styledComponents=_interopRequireWildcard(require("styled-components"));var _reactNative=require("react-native");var _yogaCommon=require("@gympass/yoga-common");var _yogaIcons=require("@gympass/yoga-icons");var _Text=_interopRequireDefault(require("../../Text"));var _excluded=["label","helper","disabled","checked","error","style","onPressIn","onPressOut","inverted","theme"];var _templateObject;function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{"default":obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj);}return newObj;}var CheckboxWrapper=_styledComponents["default"].View(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n  flex-direction: row;\n  align-items: center;\n"])));var Label=(0,_styledComponents["default"])(_Text["default"].Regular)(function(_ref){var checkbox=_ref.theme.yoga.components.checkbox;return"\n  padding-left: "+checkbox.label.padding.left+"px;\n\n  font-size: "+checkbox.label.font.size+"px;\n\n  color: "+checkbox.label.font.color+";\n";});var HelperWrapper=_styledComponents["default"].View(function(_ref2){var checkbox=_ref2.theme.yoga.components.checkbox;return"\n  margin-top: "+checkbox.helper.margin.top+"px;\n";});var Helper=(0,_styledComponents["default"])(_Text["default"].Regular)(function(_ref3){var error=_ref3.error,_ref3$theme$yoga=_ref3.theme.yoga,feedback=_ref3$theme$yoga.colors.feedback,checkbox=_ref3$theme$yoga.components.checkbox;return"\n  font-size: "+checkbox.helper.font.size+"px;\n\n  color: "+(error?feedback.attention[1]:checkbox.helper.font.color)+";\n";});var CheckBackground=_styledComponents["default"].View(function(_ref4){var checked=_ref4.checked,disabled=_ref4.disabled,inverted=_ref4.inverted,error=_ref4.error,_ref4$theme$yoga=_ref4.theme.yoga,_ref4$theme$yoga$colo=_ref4$theme$yoga.colors,primary=_ref4$theme$yoga$colo.primary,feedback=_ref4$theme$yoga$colo.feedback,elements=_ref4$theme$yoga$colo.elements,white=_ref4$theme$yoga$colo.white,checkbox=_ref4$theme$yoga.components.checkbox;var borderColor=primary;var bgColor='transparent';if(error){var _feedback$attention=(0,_slicedToArray2["default"])(feedback.attention,2);borderColor=_feedback$attention[1];if(checked){var _feedback$attention2=(0,_slicedToArray2["default"])(feedback.attention,2);bgColor=_feedback$attention2[1];}}else if(disabled){borderColor=checkbox.disabled.border.color;if(checked){bgColor=checkbox.disabled.backgroundColor;borderColor=elements.lineAndBorders;}}else if(checked){borderColor=primary;bgColor=primary;if(inverted){bgColor=white;borderColor=white;}}else if(inverted){borderColor=white;}return"\n      position: absolute;\n\n      width: "+checkbox.size+"px;\n      height: "+checkbox.size+"px;\n\n      border-radius: "+checkbox.border.radius+"px;\n      border-width: "+checkbox.border.width+"px;\n      border-style: solid;\n\n      background-color: "+bgColor+";\n\n      border-color: "+borderColor+";\n    ";});var Shadow=_styledComponents["default"].View(function(_ref5){var checked=_ref5.checked,inverted=_ref5.inverted,_ref5$theme$yoga=_ref5.theme.yoga,_ref5$theme$yoga$colo=_ref5$theme$yoga.colors,primary=_ref5$theme$yoga$colo.primary,elements=_ref5$theme$yoga$colo.elements,white=_ref5$theme$yoga$colo.white,checkbox=_ref5$theme$yoga.components.checkbox;var size=checkbox.size*1.67;var shadowColor=checked?primary:elements.backgroundAndDisabled;return"\n      width: "+size+"px;\n      height: "+size+"px;\n\n      background-color: "+(0,_yogaCommon.hexToRgb)(inverted?white:shadowColor,0.75)+";\n      border-radius: "+checkbox.hover.border.radius+"px;\n    ";});var CheckArea=_styledComponents["default"].View(function(_ref6){var checkbox=_ref6.theme.yoga.components.checkbox;return"\n  justify-content: center;\n  align-items: center;\n\n  width: "+checkbox.size+"px;\n  height: "+checkbox.size+"px;\n";});var Checkbox=function Checkbox(_ref7){var label=_ref7.label,helper=_ref7.helper,disabled=_ref7.disabled,checked=_ref7.checked,error=_ref7.error,style=_ref7.style,_onPressIn=_ref7.onPressIn,_onPressOut=_ref7.onPressOut,inverted=_ref7.inverted,_ref7$theme$yoga=_ref7.theme.yoga,checkbox=_ref7$theme$yoga.components.checkbox,colors=_ref7$theme$yoga.colors,rest=(0,_objectWithoutProperties2["default"])(_ref7,_excluded);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2["default"])(_useState,2),pressed=_useState2[0],setPressed=_useState2[1];return _react["default"].createElement(_reactNative.View,null,_react["default"].createElement(_reactNative.TouchableWithoutFeedback,(0,_extends2["default"])({},rest,{disabled:disabled,onPressIn:function onPressIn(e){setPressed(true);_onPressIn(e);},onPressOut:function onPressOut(e){setPressed(false);_onPressOut(e);}}),_react["default"].createElement(CheckboxWrapper,{style:style},_react["default"].createElement(CheckArea,null,pressed&&!disabled&&_react["default"].createElement(Shadow,{pressed:pressed,checked:checked,inverted:inverted}),_react["default"].createElement(CheckBackground,{disabled:disabled,checked:checked,error:error,pressed:pressed,inverted:inverted}),checked&&_react["default"].createElement(_yogaIcons.Check,{fill:inverted?colors.primary:checkbox.checked.icon.color,style:{position:'absolute'},width:24,height:24})),label&&_react["default"].createElement(Label,null,label))),(helper||error)&&_react["default"].createElement(HelperWrapper,null,_react["default"].createElement(Helper,{error:error},error||helper)));};Checkbox.propTypes={label:_propTypes.string,helper:_propTypes.string,checked:_propTypes.bool,disabled:_propTypes.bool,inverted:_propTypes.bool,error:_propTypes.string,style:(0,_propTypes.shape)({}),onPressIn:_propTypes.func,onPressOut:_propTypes.func};Checkbox.defaultProps={label:undefined,helper:undefined,checked:false,disabled:false,inverted:false,error:undefined,style:{},onPressIn:function onPressIn(){},onPressOut:function onPressOut(){}};Checkbox.displayName='Checkbox';var _default=(0,_styledComponents.withTheme)(Checkbox);exports["default"]=_default;
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Checkbox_exports = {};
+__export(Checkbox_exports, {
+  default: () => Checkbox_default
+});
+module.exports = __toCommonJS(Checkbox_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_prop_types = require("prop-types");
+var import_styled_components = __toESM(require("styled-components"));
+var import_react_native = require("react-native");
+var import_yoga_common = require("@gympass/yoga-common");
+var import_yoga_icons = require("@gympass/yoga-icons");
+var import_Text = __toESM(require("../../Text"));
+const CheckboxWrapper = import_styled_components.default.View`
+  flex-direction: row;
+  align-items: center;
+`;
+const Label = (0, import_styled_components.default)(import_Text.default.Regular)(
+  ({
+    theme: {
+      yoga: {
+        components: { checkbox }
+      }
+    }
+  }) => `
+  padding-left: ${checkbox.label.padding.left}px;
+
+  font-size: ${checkbox.label.font.size}px;
+
+  color: ${checkbox.label.font.color};
+`
+);
+const HelperWrapper = import_styled_components.default.View(
+  ({
+    theme: {
+      yoga: {
+        components: { checkbox }
+      }
+    }
+  }) => `
+  margin-top: ${checkbox.helper.margin.top}px;
+`
+);
+const Helper = (0, import_styled_components.default)(import_Text.default.Regular)(
+  ({
+    error,
+    theme: {
+      yoga: {
+        colors: { feedback },
+        components: { checkbox }
+      }
+    }
+  }) => `
+  font-size: ${checkbox.helper.font.size}px;
+
+  color: ${error ? feedback.attention[1] : checkbox.helper.font.color};
+`
+);
+const CheckBackground = import_styled_components.default.View(
+  ({
+    checked,
+    disabled,
+    inverted,
+    error,
+    theme: {
+      yoga: {
+        colors: { primary, feedback, elements, white },
+        components: { checkbox }
+      }
+    }
+  }) => {
+    let borderColor = primary;
+    let bgColor = "transparent";
+    if (error) {
+      [, borderColor] = feedback.attention;
+      if (checked) {
+        [, bgColor] = feedback.attention;
+      }
+    } else if (disabled) {
+      borderColor = checkbox.disabled.border.color;
+      if (checked) {
+        bgColor = checkbox.disabled.backgroundColor;
+        borderColor = elements.lineAndBorders;
+      }
+    } else if (checked) {
+      borderColor = primary;
+      bgColor = primary;
+      if (inverted) {
+        bgColor = white;
+        borderColor = white;
+      }
+    } else if (inverted) {
+      borderColor = white;
+    }
+    return `
+      position: absolute;
+
+      width: ${checkbox.size}px;
+      height: ${checkbox.size}px;
+
+      border-radius: ${checkbox.border.radius}px;
+      border-width: ${checkbox.border.width}px;
+      border-style: solid;
+
+      background-color: ${bgColor};
+
+      border-color: ${borderColor};
+    `;
+  }
+);
+const Shadow = import_styled_components.default.View(
+  ({
+    checked,
+    inverted,
+    theme: {
+      yoga: {
+        colors: { primary, elements, white },
+        components: { checkbox }
+      }
+    }
+  }) => {
+    const size = checkbox.size * 1.67;
+    const shadowColor = checked ? primary : elements.backgroundAndDisabled;
+    return `
+      width: ${size}px;
+      height: ${size}px;
+
+      background-color: ${(0, import_yoga_common.hexToRgb)(inverted ? white : shadowColor, 0.75)};
+      border-radius: ${checkbox.hover.border.radius}px;
+    `;
+  }
+);
+const CheckArea = import_styled_components.default.View(
+  ({
+    theme: {
+      yoga: {
+        components: { checkbox }
+      }
+    }
+  }) => `
+  justify-content: center;
+  align-items: center;
+
+  width: ${checkbox.size}px;
+  height: ${checkbox.size}px;
+`
+);
+const Checkbox = (_a) => {
+  var _b = _a, {
+    label,
+    helper,
+    disabled,
+    checked,
+    error,
+    style,
+    onPressIn,
+    onPressOut,
+    inverted,
+    theme: {
+      yoga: {
+        components: { checkbox },
+        colors
+      }
+    }
+  } = _b, rest = __objRest(_b, [
+    "label",
+    "helper",
+    "disabled",
+    "checked",
+    "error",
+    "style",
+    "onPressIn",
+    "onPressOut",
+    "inverted",
+    "theme"
+  ]);
+  const [pressed, setPressed] = (0, import_react.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.TouchableWithoutFeedback,
+      __spreadProps(__spreadValues({}, rest), {
+        disabled,
+        onPressIn: (e) => {
+          setPressed(true);
+          onPressIn(e);
+        },
+        onPressOut: (e) => {
+          setPressed(false);
+          onPressOut(e);
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CheckboxWrapper, { style, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CheckArea, { children: [
+            pressed && !disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Shadow, { pressed, checked, inverted }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              CheckBackground,
+              __spreadValues({}, {
+                disabled,
+                checked,
+                error,
+                pressed,
+                inverted
+              })
+            ),
+            checked && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_yoga_icons.Check,
+              {
+                fill: inverted ? colors.primary : checkbox.checked.icon.color,
+                style: { position: "absolute" },
+                width: 24,
+                height: 24
+              }
+            )
+          ] }),
+          label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { children: label })
+        ] })
+      })
+    ),
+    (helper || error) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HelperWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Helper, { error, children: error || helper }) })
+  ] });
+};
+Checkbox.propTypes = {
+  label: import_prop_types.string,
+  /** set a short helper text under checkbox */
+  helper: import_prop_types.string,
+  checked: import_prop_types.bool,
+  disabled: import_prop_types.bool,
+  inverted: import_prop_types.bool,
+  error: import_prop_types.string,
+  style: (0, import_prop_types.shape)({}),
+  onPressIn: import_prop_types.func,
+  onPressOut: import_prop_types.func
+};
+Checkbox.defaultProps = {
+  label: void 0,
+  helper: void 0,
+  checked: false,
+  disabled: false,
+  inverted: false,
+  error: void 0,
+  style: {},
+  onPressIn: () => {
+  },
+  onPressOut: () => {
+  }
+};
+Checkbox.displayName = "Checkbox";
+var Checkbox_default = (0, import_styled_components.withTheme)(Checkbox);

package/cjs/Checkbox/native/Checkbox.test.js

@@ -0,0 +1,129 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_react_native = require("@testing-library/react-native");
+var import__ = __toESM(require(".."));
+var import_Theme = __toESM(require("../../Theme"));
+const data = {
+  label: "Checkbox Component",
+  helper: "Helper Text"
+};
+describe("<Checkbox />", () => {
+  describe("Snapshots", () => {
+    it("should match snapshot without label", () => {
+      const { toJSON } = (0, import_react_native.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, {}) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot without label", () => {
+      const { toJSON } = (0, import_react_native.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, {}) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with default checkbox", () => {
+      const { toJSON } = (0, import_react_native.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, __spreadValues({}, data)) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with disabled checkbox", () => {
+      const { toJSON } = (0, import_react_native.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, __spreadProps(__spreadValues({}, data), { disabled: true })) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with checked checkbox", () => {
+      const { toJSON } = (0, import_react_native.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, __spreadProps(__spreadValues({}, data), { checked: true })) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with disabled and checked checkbox", () => {
+      const { toJSON } = (0, import_react_native.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, __spreadProps(__spreadValues({}, data), { disabled: true, checked: true })) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with error checkbox", () => {
+      const { toJSON } = (0, import_react_native.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, __spreadProps(__spreadValues({}, data), { error: "Error text" })) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with error and checked checkbox", () => {
+      const { toJSON } = (0, import_react_native.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, __spreadProps(__spreadValues({}, data), { error: "Error text", checked: true })) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with inverted", () => {
+      const { toJSON } = (0, import_react_native.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, __spreadProps(__spreadValues({}, data), { inverted: true })) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with inverted and checked", () => {
+      const { toJSON } = (0, import_react_native.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, __spreadProps(__spreadValues({}, data), { inverted: true, checked: true })) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with inverted and checked and disabled", () => {
+      const { toJSON } = (0, import_react_native.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, __spreadProps(__spreadValues({}, data), { inverted: true, checked: true, disabled: true })) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+  describe("Events", () => {
+    it("should call onChange function when press on Checkbox", () => {
+      const onChangeMock = jest.fn();
+      const { getByTestId } = (0, import_react_native.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, __spreadProps(__spreadValues({}, data), { onPress: onChangeMock, testID: "checkbox" })) })
+      );
+      import_react_native.fireEvent.press(getByTestId("checkbox"));
+      expect(onChangeMock).toHaveBeenCalled();
+    });
+  });
+});

package/cjs/Checkbox/native/Switch.js

@@ -1 +1,196 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _propTypes=require("prop-types");var _styledComponents=_interopRequireWildcard(require("styled-components"));var _yogaCommon=require("@gympass/yoga-common");var _reactNative=require("react-native");var _withTouchable=_interopRequireDefault(require("../../Button/native/withTouchable"));var _Box=_interopRequireDefault(require("../../Box"));var _templateObject,_templateObject2;function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{"default":obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj);}return newObj;}var SwitchTrack=_styledComponents["default"].View(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n  ",";\n"])),function(_ref){var checkboxswitch=_ref.theme.yoga.components.checkboxswitch,checked=_ref.checked,disabled=_ref.disabled;return"\n    display: flex;\n    justify-content: center;\n    width: "+checkboxswitch.track.width+"px;\n    height: "+checkboxswitch.track.height+"px;\n    borderRadius: "+checkboxswitch.track.radii+"px;\n    background-color: "+(checked?checkboxswitch.track.checked.backgroundColor:checkboxswitch.track.backgroundColor)+";\n\n    "+(disabled?"\n        background-color: "+checkboxswitch.track.disabled.backgroundColor+";":'')+"\n  ";});var ThumbShadow=_styledComponents["default"].View(function(_ref2){var _ref2$theme$yoga=_ref2.theme.yoga,colors=_ref2$theme$yoga.colors,checkboxswitch=_ref2$theme$yoga.components.checkboxswitch,checked=_ref2.checked;var width=checkboxswitch.thumb.width*checkboxswitch.thumb.shadowScale;var height=checkboxswitch.thumb.height*checkboxswitch.thumb.shadowScale;return"\n      width: "+width+"px;\n      height: "+height+"px;\n      position: absolute;\n      background-color: "+(checked?(0,_yogaCommon.hexToRgb)(colors.primary,0.75):(0,_yogaCommon.hexToRgb)(colors.elements.backgroundAndDisabled,0.75))+";\n      border-radius: "+checkboxswitch.thumb.radii+"px;\n    ";});var SwitchThumb=(0,_styledComponents["default"])(_Box["default"]).attrs(function(_ref3){var checkboxswitch=_ref3.theme.yoga.components.checkboxswitch,disabled=_ref3.disabled;return{width:checkboxswitch.thumb.width,height:checkboxswitch.thumb.height,borderRadius:checkboxswitch.thumb.radii,bgColor:disabled?checkboxswitch.thumb.disabled.backgroundColor:checkboxswitch.thumb.backgroundColor,elevation:checkboxswitch.thumb.shadow};})(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2["default"])([""])));var CheckboxSwitch=function CheckboxSwitch(_ref4){var checked=_ref4.checked,pressed=_ref4.pressed,disabled=_ref4.disabled,checkboxswitch=_ref4.theme.yoga.components.checkboxswitch;var _useState=(0,_react.useState)(new _reactNative.Animated.Value(Number(checked))),_useState2=(0,_slicedToArray2["default"])(_useState,1),thumbPosition=_useState2[0];var thumbTo=checkboxswitch.track.width-checkboxswitch.thumb.width-checkboxswitch.thumb.left;var thumbFrom=checkboxswitch.thumb.left;var shadowDiameter=checkboxswitch.thumb.width*checkboxswitch.thumb.shadowScale;var shadowAndThumbDiff=shadowDiameter-checkboxswitch.thumb.width;var halfDiff=shadowAndThumbDiff/2;var thumbShadowFrom=(halfDiff-checkboxswitch.thumb.left)*-1;var thumbShadowTo=thumbTo-halfDiff;(0,_react.useEffect)(function(){var toggle=function toggle(isChecked,position){var animValue={fromValue:isChecked?0:1,toValue:isChecked?1:0,duration:100,useNativeDriver:false};_reactNative.Animated.timing(position,animValue).start();};toggle(!checked,thumbPosition);},[checked]);return _react["default"].createElement(SwitchTrack,{checked:checked,disabled:disabled,as:_reactNative.Animated.View,style:!disabled&&{backgroundColor:thumbPosition.interpolate({inputRange:[0,1],outputRange:[checkboxswitch.track.checked.backgroundColor,checkboxswitch.track.backgroundColor]})}},pressed&&!disabled&&_react["default"].createElement(ThumbShadow,{checked:checked,as:_reactNative.Animated.View,style:{transform:[{translateX:thumbPosition.interpolate({inputRange:[0,1],outputRange:[thumbShadowTo,thumbShadowFrom]})}]}}),_react["default"].createElement(SwitchThumb,{checked:checked,disabled:disabled,as:_reactNative.Animated.View,style:{transform:[{translateX:thumbPosition.interpolate({inputRange:[0,1],outputRange:[thumbTo,thumbFrom]})}]}}));};CheckboxSwitch.propTypes={checked:_propTypes.bool,disabled:_propTypes.bool,pressed:_propTypes.bool};CheckboxSwitch.defaultProps={checked:false,disabled:false,pressed:false};CheckboxSwitch.displayName='Checkbox.Switch';var _default=(0,_withTouchable["default"])((0,_styledComponents.withTheme)(CheckboxSwitch));exports["default"]=_default;
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Switch_exports = {};
+__export(Switch_exports, {
+  default: () => Switch_default
+});
+module.exports = __toCommonJS(Switch_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_prop_types = require("prop-types");
+var import_styled_components = __toESM(require("styled-components"));
+var import_yoga_common = require("@gympass/yoga-common");
+var import_react_native = require("react-native");
+var import_withTouchable = __toESM(require("../../Button/native/withTouchable"));
+var import_Box = __toESM(require("../../Box"));
+const SwitchTrack = import_styled_components.default.View`
+  ${({
+  theme: {
+    yoga: {
+      components: { checkboxswitch }
+    }
+  },
+  checked,
+  disabled
+}) => `
+    display: flex;
+    justify-content: center;
+    width: ${checkboxswitch.track.width}px;
+    height: ${checkboxswitch.track.height}px;
+    borderRadius: ${checkboxswitch.track.radii}px;
+    background-color: ${checked ? checkboxswitch.track.checked.backgroundColor : checkboxswitch.track.backgroundColor};
+
+    ${disabled ? `
+        background-color: ${checkboxswitch.track.disabled.backgroundColor};` : ""}
+  `};
+`;
+const ThumbShadow = import_styled_components.default.View(
+  ({
+    theme: {
+      yoga: {
+        colors,
+        components: { checkboxswitch }
+      }
+    },
+    checked
+  }) => {
+    const width = checkboxswitch.thumb.width * checkboxswitch.thumb.shadowScale;
+    const height = checkboxswitch.thumb.height * checkboxswitch.thumb.shadowScale;
+    return `
+      width: ${width}px;
+      height: ${height}px;
+      position: absolute;
+      background-color: ${checked ? (0, import_yoga_common.hexToRgb)(colors.primary, 0.75) : (0, import_yoga_common.hexToRgb)(colors.elements.backgroundAndDisabled, 0.75)};
+      border-radius: ${checkboxswitch.thumb.radii}px;
+    `;
+  }
+);
+const SwitchThumb = (0, import_styled_components.default)(import_Box.default).attrs(
+  ({
+    theme: {
+      yoga: {
+        components: { checkboxswitch }
+      }
+    },
+    disabled
+  }) => ({
+    width: checkboxswitch.thumb.width,
+    height: checkboxswitch.thumb.height,
+    borderRadius: checkboxswitch.thumb.radii,
+    bgColor: disabled ? checkboxswitch.thumb.disabled.backgroundColor : checkboxswitch.thumb.backgroundColor,
+    elevation: checkboxswitch.thumb.shadow
+  })
+)``;
+const CheckboxSwitch = ({
+  checked,
+  pressed,
+  disabled,
+  theme: {
+    yoga: {
+      components: { checkboxswitch }
+    }
+  }
+}) => {
+  const [thumbPosition] = (0, import_react.useState)(new import_react_native.Animated.Value(Number(checked)));
+  const thumbTo = checkboxswitch.track.width - checkboxswitch.thumb.width - checkboxswitch.thumb.left;
+  const thumbFrom = checkboxswitch.thumb.left;
+  const shadowDiameter = checkboxswitch.thumb.width * checkboxswitch.thumb.shadowScale;
+  const shadowAndThumbDiff = shadowDiameter - checkboxswitch.thumb.width;
+  const halfDiff = shadowAndThumbDiff / 2;
+  const thumbShadowFrom = (halfDiff - checkboxswitch.thumb.left) * -1;
+  const thumbShadowTo = thumbTo - halfDiff;
+  (0, import_react.useEffect)(() => {
+    const toggle = (isChecked, position) => {
+      const animValue = {
+        fromValue: isChecked ? 0 : 1,
+        toValue: isChecked ? 1 : 0,
+        duration: 100,
+        useNativeDriver: false
+      };
+      import_react_native.Animated.timing(position, animValue).start();
+    };
+    toggle(!checked, thumbPosition);
+  }, [checked]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    SwitchTrack,
+    {
+      checked,
+      disabled,
+      as: import_react_native.Animated.View,
+      style: !disabled && {
+        backgroundColor: thumbPosition.interpolate({
+          inputRange: [0, 1],
+          outputRange: [
+            checkboxswitch.track.checked.backgroundColor,
+            checkboxswitch.track.backgroundColor
+          ]
+        })
+      },
+      children: [
+        pressed && !disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          ThumbShadow,
+          {
+            checked,
+            as: import_react_native.Animated.View,
+            style: {
+              transform: [
+                {
+                  translateX: thumbPosition.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [thumbShadowTo, thumbShadowFrom]
+                  })
+                }
+              ]
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          SwitchThumb,
+          {
+            checked,
+            disabled,
+            as: import_react_native.Animated.View,
+            style: {
+              transform: [
+                {
+                  translateX: thumbPosition.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [thumbTo, thumbFrom]
+                  })
+                }
+              ]
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+CheckboxSwitch.propTypes = {
+  checked: import_prop_types.bool,
+  disabled: import_prop_types.bool,
+  pressed: import_prop_types.bool
+};
+CheckboxSwitch.defaultProps = {
+  checked: false,
+  disabled: false,
+  pressed: false
+};
+CheckboxSwitch.displayName = "Checkbox.Switch";
+var Switch_default = (0, import_withTouchable.default)((0, import_styled_components.withTheme)(CheckboxSwitch));